在 java 脚本中使用 href 更改图像

Change image with href in java script

本文关键字：href 图像 java 脚本      更新时间：2023-09-26
<a href="#" id=BigSwatch><img src="addtocart.png" onclick="SwapLink('ekhle.html');"
 onClick=display('pleasewait.png') /></a>

在此编码中，我想更改图像并更改href。在这里，当用户单击addtocart.png图像时，我想将图像更改为请等待.png当用户单击请等待.png图像时，我想更改href，例如" url2.html"，但是当我应用我的编码图像时，更改了但url2.html页面也直接重定向。

<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');
    }
});

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");

    });

更好的方法是您可以放置带有背景图像的锚点。您可以遵循简单的过程 -

  1. 保留一个具有背景图像"addToCart.png"和类"addToCart"的锚点
  2. 单击时将类更改为"请等待"，这会将背景图像更改为"请等待.png"
  3. 在单击"编写一个函数进行检查"时，如果它具有类"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();
   }
});

我希望这会正常工作。

你可以像

这样用你的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>

现场演示

我使用了来自谷歌的图片。 :)

试试这段代码。

<!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>

<!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>
相关文章：