Solved

Moving images in javascript

Posted on 2004-03-30
5
12,720 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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

739 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