please help (200pts)

i have two images on is called "kernel_commands_up" and "Kernel_commands_down" and both these graphic files are transparent gifs.

What i would like is for the "kernel_commands_up" graphic to be on the page and when the mouse goes over it then the other graphic file "Kernel_commands_down"
 is displayed directly over the top of the original file and when the mouse goes off the original file is displayed.

kernel_commands_up
on mouse over kernel_commands_down is displayed and when the mouse is off the original file is displayed

can this be done, its like a small animation

Please can someone post some code A.S.A.P

first to give correct working code gets all the points!!!

thanx
penfold69Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
dij8Connect With a Mentor Commented:
If you want to have an image appear over the top of another image then you will need to do it with absolutely positioned DIV's.

This should work:

<html>
<head>
<title></title>
<style type="text/css">
#image1 {
  position:absolute;
  top:150;
  left:150;
  z-index:2;
}
#image2 {
  position:absolute;
  top:150;
  left:150;
  z-index:3;
  visibility:hidden;
}
</style>
<script language="JavaScript" type="text/javascript">
<!-- // cloak
function showimage2() {
  if (document.layers) {
    document.layers["image2"].visibility="show"
  } else if (document.all) {
    document.all["image2"].style.visibility="visible"
  } else if (document.getElementById) {
    document.getElementById("image2").style.visibility="visible"
  }
}
function hideimage2() {
  if (document.layers) {
    document.layers["image2"].visibility="hide"
  } else if (document.all) {
    document.all["image2"].style.visibility="hidden"
  } else if (document.getElementById) {
    document.getElementById("image2").style.visibility="hidden"
  }
}
// decloak -->
</script>
</head>
<body>
<div id="image1" onmouseover="showimage2()" onmouseout="hideimage2()"><img src="image1.gif"></div>
<div id="image2" onmouseover="showimage2()" onmouseout="hideimage2()"><img src="image2.gif"></div>
</body>
</html>
0
 
a.marshCommented:
What browsers does this have to work in?

Ant
0
 
dorwardCommented:
<img src="kernel_commands_up.gif" name="kernel_commands" onMouseOver="document.kernel_commands.src='kernel_commands_down.gif'" onMouseOut="document.kernel_commands.src='kernel_commands_up.gif'" alt="Kernel Commands" width="100" height="75">

(Make sure you change the height and width)
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
COBOLdinosaurCommented:
basic code foran image swap is:

<a href="javascript:;"
onMouseover="document.images['theimage'].src='Kernel_commands_down.gif'"
onMouseup="document.images['theimage'].src='Kernel_commands_up.gif'">
<img id="theimage" src="Kernel_commands_up.gif"></a>

Let me know what else you need to know.

Cd&
 
0
 
COBOLdinosaurCommented:
Code is similar, but biggest difference is that what I posted is cross-browser.  Netscrap does not support mouseover on an image.  It needs to be a link.

Cd&
0
 
dorwardCommented:
/me drops in to IRC syntax and remembers why he usually avoids client side JavaScript like the plague.
0
 
a.marshCommented:
I think you guys are missing the point - he doesn't want to replace the image - he wants one sitting on top of the other - hence the transparency takes effect and you get a "merged" image.

At least, that's what I read from the question.

:o)

Ant
0
 
ahosangFinance Systems DeveloperCommented:
If a.marsh is right then it's impossible in netscape, but you could programatically set mouseovers to images in Netscape if you don't want the hand cursor of a link.
0
 
penfold69Author Commented:
Can someone PLEASE tell me where i put this code in my html eg under head or body
0
 
a.marshCommented:
ahosang - just as I expected, which is why I asked what browsers needed to be supported.

:o)

Ant
0
 
a.marshCommented:
The kind of thing I had in mind - but is there not an issue with the <div> being transparent in Netscape? I've had nightmares with transparency in Netscape...

Ant
0
 
dij8Commented:
Shouldn't be an issue.  It's what I did at http://ajaminsession.com/html/ (be warned, heavy image content, if your connection is less than 128K don't bother).  If you do bother hover of the three black things in the top right.  It works in IE4+ PC and Mac and NS4+ PC and Mac.
0
 
ahosangFinance Systems DeveloperCommented:
Ah yes, that type of merge is easily done with z-indices as dij8 shows. Me, I was thinking of filters and moz-opacity, but really penfold doesn't seem to want that.
0
 
sturobinson17Commented:
how about a flash file Penfold? If you don't have flash, I'd be happy to do it for you.
0
 
nzjonboyCommented:
penfold69

>Can someone PLEASE tell me where i put this code in my html eg under head or body

I am guessing you are talking about ColbolDinos code, put it in the body of the page

nzjonboy
0
 
COBOLdinosaurCommented:
The code goes in the body at the point where you want the effect on the page

Cd&
0
 
dij8Commented:
Why only a B?  I gave you a full working page.  Which gave you the code you needed.  AND showed you exactly where it goes in a page.  AND it was in under an hour and a half (which I would consider at least close to ASAP).  What did I miss?

Glad to help of course.  And will probably continue to do so too.  But have a look at http://www.experts-exchange.com/jsp/cmtyQuestAnswer.jsp#3 (found at the bottom of this page under "For more tips on comments and answers, click here.").
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.