Solved

Moving images in javascript

Posted on 2004-03-30
5
12,715 Views
Last Modified: 2012-08-14
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
Comment
Question by:adesai79
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
so img1 is hidden and then when you mousover img2; img1 becomes visible and moves over img2

is this correct?
0
 

Author Comment

by:adesai79
Comment Utility
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
 
LVL 16

Accepted Solution

by:
jaysolomon earned 125 total points
Comment Utility
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
 

Author Comment

by:adesai79
Comment Utility
Thanks jaysoloman for your expert advise,

I got what i wanted.
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
Glad to have helped and thanks for the A
jAy
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now