I have an image on my page.

The image is to change to another image when the mouse hovers over it. And it does, using onmouseover/onmouseout.

I need the image that it changes to, to be placed on my page in another area in which I can control with css.

I was thinking that I can use css to position the 2nd image on the page to place it where I want it.

Heres my code so far;

--------------------------------------
<div id="a1">
    <img src="http://mysite/a_images/a1.png" alt="images" onmouseover="this.src='http://mysite/a_images/a.png'" onmouseout="this.src='http://mysite/a_images/a1.png'" />
</div> 
---------------------------------------

What this code does is replaces and image when the mouse is over the image then the image goes back to the original when the mouse is not over the image.

I need to have the image (a.png) to appear in a different area on my page, also, and I need to be able to control the position of a.png with css.

So I would have 2 a.png images on the page, being displayed at the same time. Then when the mouse is not over the image, you will not see the 2 images of a.png anymore, you will only see a1.png

is it possible?

Thanks jb

  • That's known that money makes us independent. But how to act if one has no cash? The one way only is to receive the <a href="http://goodfinance-blog.com/topics/credit-loans">credit loans</a> and term loan. PARKERVERNA24 over 7 years ago

2 answers

o.k.w 2355
0
points
This was chosen as the best answer

You will probably find it easily done with jQuery. I've created the generic javascript codes below in case you do not want to use jQuery or other JS framework.

"a1clone" is the id of the second image, you can set the position ad style of it in your css. It is set to not show on load. On mouseover the first image, it will have the src assigned and displayed. On mouseout, it simply disappear. You can play around with the codes for your need.

<script type="text/javascript">
  function swapImg(imgObj, isHover, imgOrg, imgHover) {
    //set img src depending on hover or not
    imgObj.src = 'http://mysite/a_images/' + (isHover ? imgHover : imgOrg);

    var cloneImg = document.getElementById('a1clone'); //get the instance of 2nd img
    if(isHover) {
      cloneImg.src = 'http://mysite/a_images/' + imgHover; //set the clone src to hover img
      cloneImg.style.display = 'block'; //or inline to show image
    }
    else
      cloneImg.style.display = 'none'; //hide the image
   }
</script>

<div id="a1">
    <img src="http://mysite/a_images/a1.png" alt="images"
      onmouseover="swapImg(this, true, 'a.png', 'a1.png');" 
      onmouseout="swapImg(this, false, 'a.png', 'a1.png');" />
</div> 
<img id="a1clone" style="display: none;" />

PS: The above is not tested but the concept is correct and sound. Let me know if there are any issues.

Answered over 9 years ago by o.k.w
  • This was the best answer, thanks, it realy helped me out a lot. I just had to swap images in (onmouseover a1 a)and make images the same in (onmouseout, a1 a1). Battle Tested over 9 years ago
  • I've updated the codes to use the 'imgHover' for the src of the clone/second image. That will make it more reusable. o.k.w over 9 years ago
5
1
point

I believe that what you would like to do can be achieved via a helping of JavaScript.

//js functions
//img = the image which the cursor is hovering over
function showImages(img) {
  img.src = 'http://mysite/a_images/a.png';
  //set image src for 2nd image
  document.getElementById('other-image').src = 'http://mysite/a_images/a.png';
  //show css controlable div
  document.getElementById('other-image-div').style.display = block;
}
//img = the image which is no longer being hovered over
function hideImages(img) {
  img.src = 'http://mysite/a_images/a1.png';
  document.getElementById('other-image-div').style.display = 'none';
}

Now we create the html

<div id="a1">
    <img src="http://mysite/a_images/a1.png" alt="images" onmouseover="showImages(this)" onmouseout="hideImages(this)" />
</div>
<div id='other-image-div' class='css-control'>
    <img id='other-image' src='#'/>
</div>
Answered over 9 years ago by
  • I was kinda confused because I didnt need but 2 divs and I didnt know how to adjust the code but thanks for taking the time out to help. jb Battle Tested over 9 years ago