Question

<a href="#" id=BigSwatch><img src="addtocart.png" onclick="SwapLink('ekhle.html');"
 onClick=display('pleasewait.png') /></a>

在这个编码中，我想要改变图像并改变href。用户点击 addtocart.png 图片时，我想将图片更改为 pleasewait.png ，当用户点击 pleasewait.png 图片时，我想更改href，例如“ url2.html ”，但是当我应用我的编码图像时， url2.html 页面也会直接重定向。

Answer 1

<a href="#" id=BigSwatch><img id="test" src="addtocart.png" onclick="SwapLink('ekhle.html');"
 onClick=display('pleasewait.png') /></a>

<强>脚本

$('#BigSwatch').on({
    'click': function(){
        $('#test').attr('src','pleasewait.png');
        $('#BigSwatch').attr('href','url2.html');
    }
});

Answer 2

<强> HTML

<a href="#" id=BigSwatch><img src="addtocart.png" /></a>

JS中的

 $("#BigSwatch").on("click","img",function(){
    $(this).attr("src","pleasewait.png");// here your image path will set
    $(this).closest("#BigSwatch").attr("href","ekhle.html");


    });

Answer 3

更好的方法是你可以放置一个带有背景图像的锚点。您可以按照简单的流程 -

使用背景图片“addToCart.png”和“addToCart”类保留一个锚点
点击后将课程更改为“请等待”，这会将背景图像更改为“pleasewait.png”
On Click写一个要检查的函数，如果它有“addToCart”类，那么防止默认重定向，否则转到“url2.html”。

<强> HTML：

<a href="url2.html" id="BigSwatch" class="addToCart"></a>

<强> CSS：

.addToCart {
    background-image:url('images/addToCart.png');
    display:block;
    /* Define width and height */
}
.pleaseWait {
    background-image:url('images/pleaseWait.png');
}

<强>使用Javascript：

$('#BigSwatch').click(function(e){
   if($(this).hasClass('addToCart')) {
      $(this).removeClass('addToCart').addClass('pleaseWait');
      e.preventDefault();
   }
});

我希望这样可以正常工作。

Answer 4

您只需 HTML标记就可以执行此操作

<a href="#" id=BigSwatch onClick="this.href='ekhle.html'">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" 
 onClick="this.src='https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png'; this.parent.href='ekhle.html'" />
</a>

Live Demo

我使用过谷歌的图片。：）

Answer 5

试试这段代码。

<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
if(info.src.match("pleasewait.png")){
    window.location="irl.html";
}
else{
    info.src="pleasewait.png";
}
}
</script>
</head>

<body>
<img src="addtocart.png" id="hr" onclick="switchHref()"        
width="100" height="100"/>
</body>
</html>

Answer 6

<!DOCTYPE html>
<html>
<head>
<script>
function switchHref(){
info=document.getElementById("hr");
info1=document.getElementById("link");
doc=document.getElementById("rad");
if(doc.checked==true){
    info.src="pleasewait.png";
}
if(info.src.match("pleasewait.png")){
    window.location="url.html";
}
}
</script>
</head>

<body>
<img src="addtocart.png" id="hr" width="100"   
height="100"/>
<input type="radio" id="rad"  
onChange="switchHref()" />Click
</body>
</html>

在javascript中使用href更改图像

6 个答案: