How to make an image change when mouse over and then change back when mouse out?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Spencer Killen
    New Member
    • Jan 2011
    • 10
    #1

    How to make an image change when mouse over and then change back when mouse out?

    As the title says i'd like to have a image (mocha1150.Gif) and when the mouse moves over them id like them to change to mocha5150ani.Gi f and when the mouse moves out id like to change it back to mocha1150.Gif

    I already have the code written can someone please tell me whats wrong with it?

    Code:
    <html>
<head>
<script type="text/javascript">
function moveover(imga,ida)
{
document.getElementById('ida').src="imga";
}
function moveout(imgb,idb)
{
document.getElementById('idb').src="imgb";
}
</script>
</head>




<div style="position:absolute;top:20px;left:20%" align="center"><font face="arial" id="title" size="20" >Welcome to Spencer's Test website</font></div>
<img src="top.GIF" width="100%" height="75px" />
<br>



<img id="aa" src="mocha1150.GIF"
onmouseover="moveover(mocha5150ani.GIF,aa)"
onmouseout="moveout(mocha1150.GIF,aa)"  />


<html>
    also if theirs a way to do it without creating a function and doing it within the element can someone please tell me how?
    Tags: dhtml, function, image, img, javascript
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      first, function make coding easier. no need to drop them.

      second, in JavaScript variables are not quoted. i.e. in your functions you define 2 parameters, but you don’t use them. in contrast to that, strings must always be quoted.

      third, you have 2 functions doing exactly the same …

      fourth, (advanced) you don’t need the document.getEle mentById() call. using the keyword for the current element is cleaner and shorter.
      Code:
      function changeSource(pic, obj)
{
    obj.src = pic;
}
      Code:
      <img src="mocha1150.GIF" onmouseover="changeSource('mocha5150ani.GIF', this)" onmouseout="changeSource('mocha1150.GIF', this)"  />
      PS. even that can be simplified, but that’s for later.

        Comment

        • Spencer Killen
          New Member
          • Jan 2011
          • 10
          #3
          0k I updated my code, but it still does'nt work it displays the mouseout image only
          Code:
          <html>
<head>
<script type="text/javascript">
function change(img,id)
{
id.src = img;
}

</script>
</head>

<div style="position:absolute;top:20px;left:20%" align="center"><font face="arial" id="title" size="20" >Welcome to Spencer's Test website</font></div>
<img src="top.GIF" width="100%" height="75px" />
<br>

<img src="mocha1150.GIF"
onmouseover="change(mocha5150ani.GIF,this)"
onmouseout="change(mocha1150.GIF,this)"  />

<img src="mocha2150.GIF"
onmouseover="change(mocha5150ani.GIF,this)"
onmouseout="change(mocha2150.GIF,this)"  />

<img src="mocha3150.GIF"
onmouseover="change(mocha5150ani.GIF,this)"
onmouseout="change(mocha3150.GIF,this)"  />

<img src="mocha4150.GIF"
onmouseover="change(mocha5150ani.GIF,this)"
onmouseout="change(mocha4150.GIF,this)"  />
<html>

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              Is there a reason why you are using javascript to do this when CSS can far easier?

                Comment

                • Bharat383
                  New Member
                  • Aug 2011
                  • 93
                  #5
                  using css ::

                  Code:
                  #div
{
 background:orange;
}
#div:hover
{
 background:url('images/img1.jpg');
}
                  Bharat Parmar(Bharat38 3)
                  Last edited by Dormilich; Apr 21 '12, 09:55 AM. Reason: Please use [CODE] [/CODE] tags when posting code.

                    Comment

                    Previous template Next
                    Working...