Solved

please help (200pts)

Posted on 2001-08-07
17
177 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
  • 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)

816 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now