CODEWITHSUNDEEP
htmlcssimagehyperlinkhref
eric
eric

Reputation: 147

Onclick with image link

I want to create a menu that will change when mouseover and onclick.

But, my onclick will only turn blank when clicked.

I found out that if i delete the a href, the onclick function will function.

Anyone know how to solve the 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>

Upvotes: 4

Views: 30675

Answers (3)

Ivanka Todorova
Ivanka Todorova

Reputation: 10219

You can use CSS for this. Example html:

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

Example css:

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/

Upvotes: 2

Ashouri
Ashouri

Reputation: 906

You can make this without jquery library

just with simple javascript

  <html>
  <head>
  <script>
  function myFunction()
  {
   alert("Hello World!");
  }
  </script>
 </head>

  <body>
  <img src="test.png" onclick="myFunction()">
  </body>
  </html>

Upvotes: 2

gabitzish
gabitzish

Reputation: 9691

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>

Upvotes: 6

Related Questions