Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

please help (200pts)

Posted on 2001-08-07
17
Medium Priority
?
204 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
Independent Software Vendors: 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!

 
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 600 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

715 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