在java腳本中使用href更改圖像

<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頁面也直接重定向。在java腳本中使用href更改圖像

來源

2013-10-29 Sam

現在，這些是什麼功能呢？這不是正確的做法。 –

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

來源

2013-10-29 05:18:03

它直接將我的網頁從index.html重定向到other.html – Sam

我不想要它。我想唯一的改變形象，當第二圖像URL用戶點擊重定向到other.html頁 – Sam

http://merchworld.eu/products/ane-brun/3094/birds-grey#，在這裏你可以看到例如這一點，當我選擇改變的彩色圖像和圖像的href也改變。請幫助 – Sam

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


    });

來源

2013-10-29 05:18:41

這不行，因爲我想朋友，http://merchworld.eu/products/ane-brun/3094/birds-grey#，在這裏你可以看到當你選擇大小和顏色這種類型的例子，形象改變並且href也會更改爲 – Sam

更好的方法是你可以把錨點與背景圖像。您可以按照簡單的過程 -

保持錨與背景圖像「addToCart.png」，並以一流的「addToCart」
在點擊更改類爲「PLEASEWAIT」這將改變背景圖像「pleasewait.png」
點擊編寫一個函數來檢查，如果它有類「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(); 
    } 
});

我希望這會工作得很好。

來源

2013-10-29 05:47:34 Ashmah

它直接重定向到網頁url2.html。我想只改變形象和母雞我點擊pleasewait.png圖像，然後頁面url2.html打開 – Sam

是的，因爲最初它有類「addToCart」默認重定向將因被防止e.preventDefault（）。然後在下一次點擊它將使用href網址。 – Ashmah

你可以參考這個小提琴：http://jsfiddle.net/d4L4K/ 唯一的區別是，我改變顏色的地方形象，並打開該網址在新標籤及其在小提琴。 – Ashmah

您可以與您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

我從谷歌使用的圖像

。 :)

來源

2013-10-29 06:00:01 Rex

是的，這是工作，但首先我想只改變圖像，然後重定向到其他頁面請幫助 – Sam

@ user2930603你會再次點擊或在同樣的點擊 – Rex

試試這個代碼。

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

來源

2013-10-29 08:32:32 Jason

感謝很多傢伙........ – Sam

嗨朋友我想在上面添加一個單選按鈕來選擇尺寸。這是可能的，當我點擊addtocart.png圖像時，首先它顯示「請選擇大小」，並選擇單選按鈕後進一步處理addtocart.png更改爲plesewait.png和href也。 – Sam

請幫助....我是新的 – Sam

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

來源

2013-10-29 15:23:23 Jason

在java腳本中使用href更改圖像

回答

相關問題