• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 12734
  • Last Modified:

Moving images in javascript

I want an image to be initially invisible and another image(2nd image) to be placed on top of it., when the page loads.

Now, due to some external event trigger like mouseOver, i want the 2nd image to move over and the first image to be displayed.

This all should be done in javascript or DHTML.. Could somebody plz suggest me a solution.

Thanks
0
adesai79
Asked:
adesai79
  • 3
  • 2
1 Solution
 
jaysolomonCommented:
so img1 is hidden and then when you mousover img2; img1 becomes visible and moves over img2

is this correct?
0
 
adesai79Author Commented:
Okie let me explain it:

img1 is hidden
img2 is placed over img1
When i mouseover img3 (any other image), img2 moves down and img1 gets displayed

for example:

before:

img3
img2                                               - image1 is hidden here


after:

img3
img1
img2
0
 
jaysolomonCommented:
is this what you want

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function toggle(obj){
      var objId = document.getElementById(obj);
            objId.style.display = (objId.style.display == "none")?"":"none";
}
// -->
</script>
</head>
<body>
<a href="#" onmouseover="toggle('img1');" onmouseout="toggle('img1');"><img src="http://www.google.com/intl/en_ALL/images/images_hp.gif" border="0"></a>
<div id="img1" style="display: none;"><img src="http://oldlook.experts-exchange.com:8080/images/logoWhiteSmall.gif"></div>
<div id="img2"><img src="http://www.google.com/images/logo.gif"></div>

</body>
</html>
0
 
adesai79Author Commented:
Thanks jaysoloman for your expert advise,

I got what i wanted.
0
 
jaysolomonCommented:
Glad to have helped and thanks for the A
jAy
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now