Solved

Moving images in javascript

Posted on 2004-03-30
5
12,718 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
ID: 10715952
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
ID: 10716273
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
ID: 10716562
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
ID: 10716897
Thanks jaysoloman for your expert advise,

I got what i wanted.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10716948
Glad to have helped and thanks for the A
jAy
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

839 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