All geek questions in one place

Onclick with link to image

I want to create a menu that changes when you mouse over and onclick.

But my click will only be blank when clicked.

I found out that if I remove href, the onclick function will work.

Does anyone know how to solve a problem?

<a href="{storeurl}?act=aboutus"> <img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg" onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'" onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'" onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'"/> </a>
+4
source share
3 answers

add return false; at the end of the callback function:

 <a href="{storeurl}?act=aboutus"><img src="skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg" onclick="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'; return false;" onmouseover="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg'" onmouseout="this.src='skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg'" /></a>
+6
source

You can use CSS for this. html example:

 <ul> <li><a href="#n">Whisky</a></li> </ul>

css example:

 ul a { display: block; background: url('skins/sunlift/styleImages/navbar_pic/aboutus_n.jpg') no-repeat; } ul a:active, ul a:focus { background: url(skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg) no-repeat; } ul a:hover { background: url('skins/sunlift/styleImages/navbar_pic/aboutus_h.jpg') no-repeat; }

Demo: http://jsfiddle.net/FakeHeal/VtZVz/3/

+1
source

You can do it without jquery library

just using simple javascript

  <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <img src="test.png" onclick="myFunction()"> </body> </html>
0
source

Source: https://habr.com/ru/post/1437516/

More articles:


All Articles