Hovering Images

Discussion in 'HTML & Website Design' started by gurokevin, Mar 6, 2012.

0
  1. #1
    Can anyone tell me what code I could use to make my images do this hover thing where it shows one picture and then you hover over it and it shows another like on this page? I love this effect but can't figure it out.
    http://www.tucia.com/service/extensive/

    BTW, I will be putting this on a Wordpress site, don't know if that matters or not.

    Thanks
     
    gurokevin, Mar 6, 2012 IP
  2. eydesign

    eydesign Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    eydesign, Mar 12, 2012 IP
  3. 137th Gebirg

    137th Gebirg Active Member

    Messages:
    70
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #3
    jQuery serves many purposes, but I don't like using it for everything. It's simple to change the image in raw JavaScript without having to load in huge libraries, filling up memory unnecessarily.

    <SCRIPT TYPE="text/javascript">
  function changeImage(img_id, new_image) {
    document.getElementById(img_id).src = new_image;
  }
</SCRIPT>

<HTML>
  <BODY>
    <IMG ID="source_image" SRC="img1.gif" onMouseOver="changeImage('source_image', 'img2.gif');" onMouseOut="changeImage('source_image', 'img1.gif');">
  </BODY>
</HTML>
    Code (markup):
    I have tested it in IE6 and FireFox and it works. All others should work as well. If you want to get fancy, you can pre-load images either by using JavaScript or by placing them in div layers with style "display: none;" and use the JavaScript function to instead swap "display: inline" or "display: block" between the div layers by their ID's. It will give the same effect, but will not show them individually loading while they're displaying. This becomes more important if you're showing bigger images.

    If you have a good rudimentary understanding of the basics of JavaScript, it will definitely help you in the long run if you choose to pursue a career in web development. Like I said, yes, understand how to use JS libraries like jQuery and MooTools, but do not rely solely on them. Everyone needs to know how JavaScript works at its lowest level in order to be an effective coder and/or analyst.
     
    Last edited: Mar 13, 2012
    137th Gebirg, Mar 13, 2012 IP