Solved

please help (200pts)

Posted on 2001-08-07
17
201 Views
Last Modified: 2010-04-09
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
Comment
Question by:penfold69
[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
  • 4
  • 3
  • 3
  • +5
17 Comments
 
LVL 15

Expert Comment

by:a.marsh
ID: 6361606
What browsers does this have to work in?

Ant
0
 
LVL 17

Expert Comment

by:dorward
ID: 6361625
<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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6361633
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6361650
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
 
LVL 17

Expert Comment

by:dorward
ID: 6361655
/me drops in to IRC syntax and remembers why he usually avoids client side JavaScript like the plague.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6361661
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
 
LVL 12

Expert Comment

by:ahosang
ID: 6361785
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
 

Author Comment

by:penfold69
ID: 6361802
Can someone PLEASE tell me where i put this code in my html eg under head or body
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6361821
ahosang - just as I expected, which is why I asked what browsers needed to be supported.

:o)

Ant
0
 
LVL 10

Accepted Solution

by:
dij8 earned 200 total points
ID: 6361844
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
 
LVL 15

Expert Comment

by:a.marsh
ID: 6361863
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
 
LVL 10

Expert Comment

by:dij8
ID: 6361912
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
 
LVL 12

Expert Comment

by:ahosang
ID: 6362013
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
 
LVL 1

Expert Comment

by:sturobinson17
ID: 6362198
how about a flash file Penfold? If you don't have flash, I'd be happy to do it for you.
0
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6362246
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6363973
The code goes in the body at the point where you want the effect on the page

Cd&
0
 
LVL 10

Expert Comment

by:dij8
ID: 6365364
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

623 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