Solved

Moving images in javascript

Posted on 2004-03-30
5
12,719 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

740 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