Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 205
  • Last Modified:

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
0
penfold69
Asked:
penfold69
  • 4
  • 3
  • 3
  • +5
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
ahosangCommented:
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
 
dij8Commented:
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:
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
 
ahosangCommented:
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

Featured Post

Industry Leaders: 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!

  • 4
  • 3
  • 3
  • +5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now