onMouseover & z-index [Archive]

View Full Version : onMouseover & z-index

jedicecil

09-12-2002, 10:35 PM

Is there a way to create a Mouseover that changes the z-index of an image/link? I want to layer small image/links partially on top of each other, but when the reader picks one I want the same image/link to pop up to the top layer. Here is the code that I thought should work, but it doesn't:

<a href="/pages/work.html"
onMouseover="green.style='position: absolute; left: 400px; top: 400px; z-index: 4' "
onMouseout="green.style='position: absolute; left: 400px; top: 400px; z-index: 1' ">
<img src="/pics/green.gif" width="50" height="50" border="0" name="green" style="position: absolute; left: 400px; top: 400px; z-index: 1"></a>

What am I don't wrong?

----------------------------------------------------------

Thanks for the help. I'm just getting into JavaScript on my own after taking an HTML course with minimal JavaScript. I'm pretty patient about learning the language and working my way up, but this question is really bugging me. My idea is to display small pics of my favorite digital photographs as if they were in a pile, partially buried by each other. But I want the chosen pic to "jump out" when the reader passes over it, and then it will link to a full size pic. I've tried every combination of script that my inadequate knowledge can think of, but always I get errors. In my search on the net for an answer I just found more questions, and eventually this forum. Hopefully I can find the answer here, if it exists.

Thanks again and I hope to become an active member here. Though listening more than speaking at first, of course.

ShriekForth

09-12-2002, 10:53 PM

You don't relaly need to redeclare all of those style attributes. The easiest way is probably to have the image capture the mouse over then you may reference it directly. This works fine.

<a href="/pages/work.html" ><img src="/pics/green.gif" width="50" height="50" border="0" name="green" style="position: absolute; left: 400px; top: 400px; z-index: 1"
onMouseOver="this.style.zIndex = 10" onMouseOut="this.style.zIndex = 1"></a>
<a href="/pages/work.html" ><img src="/pics/green.gif" width="50" height="50" border="0" name="green" style="position: absolute; left: 410px; top: 410px; z-index: 1"
onMouseOver="this.style.zIndex = 10" onMouseOut="this.style.zIndex = 1"></a>

You may want to move it into a function if you are going to change several attributes to save typeing, and long lines.

ShriekForth

jedicecil

09-13-2002, 01:41 AM

Thanks ShriekForth, I didn't think I should have to redeclare all the attributes either, I just wasn't sure and was playing it safe.

I knew there were different ways of doing mouseovers, and yours worked like a charm (and is easier). But I still have to wonder why my way didn't work?

Oh well, at least now I can sleep at night. I'll figure it out when my education catches up to my curiosity. And I'll have a great new addition to my site soon.

thanks again.:thumbsup:

umm

09-13-2002, 03:51 AM

but I don't think it will work in nn4. Is nn4 important for you?

[edit]
On second thought, I'll include sample code to get it working in nn4 anyway (just in case). It might be handy for other things as well.


<html>
<head>
<title>Z Order</title>

<style type="text/css">

</style>

<script type="text/javascript">

</script>
<head>

<body>


<div id="img1" >
<a href="some.html">
<img src="images/image01.jpg"></a>
</div>

<div id="img2">
<a href="some.html"
onmouseover="swapImages('img2','200')"
onmouseout="swapImages('img2','2')">
<img src="images/image02.jpg"></a>
</div>

<div id="img3">
<a href="another.html"
onmouseover="swapImages('img3','200')"
onmouseout="swapImages('img3','1')">
<img src="images/image03.jpg"><a/>
</div>

</body>
</html>

jedicecil

09-13-2002, 05:17 AM

While I am trying to be Netscape friendly (i.e. not using spaces in any of my names, etc...), your code looks to be a little over my head. I'm just happy if my pages work in any browser.:D

I'll probably just hold onto it for now and bargain that my handfull of surfers use IE or updates of NN. Mine is not a commercial site.

Thanks for the info

ShriekForth

09-13-2002, 03:36 PM

Your is not working because it is not referencing what object is going to get those attributes. You need to tell it who is going to need those changes. I'm quite sure that NS will not do this as it is generally a pain in the a$$.

One of the first things you should learn is how/why browsers are different, then decide what browsers you will support. If it's a personal page, I no longer support NS 4.X. I was tired of needing to have three branches of script to do most dynamic stuff. If you are working with just forms it's fine, but with DHTML it seems I almost double some development times to accommodate this browser. I do enough of that at work to support that 3% market share. (I am a little bitter) Anyway...

The reason umm uses a function as I had suggested is that browsers do not reference the same object/property in the same way. Only a couple of years ago there where 2 major browsers with major differences, Netscape, and Internet Explorer. Netscape decided they would get WC3 to accept their "layers" as a standard and built that into the browser, MS though that .all was the way to go and web developers inherited a mess. Now we had to check for the browser to make certain changes to one reference or another. So in this case, to change the zIndex of a div, in NS you would need to reference it through the layer object.
IE lets you reference it through the document, without a the extra step of going through the layer. Now with the new browsers supporting (sort of) the DOM now a third decision is required, and you reference it through the elements, getElementByID(''). This final way is actually I believe the nicest way. But this is why you will see structures in javascript checking for 3 and sometimes 4 (opera) different browsers, or browser objects.

if (document.layers)
ns4 = true; //If it is NS 4 use document.layers
else
if (document.getElementById)
dom = true; //This could be IE 5.5, partial support, IE 6, and NS7/NS6/Mozilla use document.getElementById()
else
ie4 = true; // ie 4, use document.all

Some say that checking for what objects the browser supports is not the best way to go about it. It is still how the majority of the code you see here will be done. Check out theWeb Monkey (http://hotwired.lycos.com/webmonkey/98/10/index2a.html) for quite a bit on DHTML, and browser detection (http://hotwired.lycos.com/webmonkey/authoring/browsers/). There is a lot of information there about the version 4.0 browsers, that is a good stepping stone to get you on your way to understanding the mess left by not following standards, MS, and NS are both guilty. The newer versions are closer than they have ever been to being able to write one script and have it work across browsers. In theory you should be able to write one script using the getElementById, or getElementByName and have it work in IE6+, NS6+, Mozilla 1+. Tutorials for the new browsers can be found out here somewhere, I can't think of any right off.

You have a good start, you found a great place to come for help. Good luck out here :)

ShriekForth