PDA

Click to See Complete Forum and Search --> : onmouseover in <img> tag in netscape...

cate
04-30-2004, 06:51 AM
hi,
I was wondering whether anyone knew of an alternative to the onmouseover attribute of the <img> tag for Netscape - as it doesnt seem to support it.
thanks,
Cate
coothead
04-30-2004, 09:04 AM
Hi there cate,

I am afraid that you are mistaken :D
Something like this works fine in...
Netscape 7.1, Mozilla 1.6 and firefox 0.8

<img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'" alt=""/>

coothead
cate
04-30-2004, 09:07 AM
well - ive been trying it in netscape and it doesnt seem to work: ill post my code:


<td id="gallery">
&nbsp;&nbsp;<a href="#" onMouseOver="preview('image1')" onClick="javascript:return false;"><img src="images/random/thumb/1.gif" width="80" height="85" border="0"></a>
<img src="images/random/thumb/2.gif" width="80" height="85" onmouseover="preview('image2')"><br>
&nbsp;&nbsp;<img src="images/random/thumb/3.gif" width="80" height="64" onmouseover="preview('image3')">
<img src="images/random/thumb/4.gif" width="80" height="64" onmouseover="preview('image4')"><br>
&nbsp;&nbsp;<img src="images/random/thumb/5.gif" width="80" height="64" onmouseover="preview('image5')">
<img src="images/random/thumb/6.gif" width="80" height="64" onmouseover="preview('image6')"><br>
&nbsp;&nbsp;<img src="images/random/thumb/7.gif" width="80" height="85" onmouseover="preview('image7')">
<img src="images/random/thumb/8.gif" width="80" height="85" onmouseover="preview('image8')"><br>
</td>

this is just the section for the images - you can see i tried to move the onmouseover to a <a> tag but that doesnt work either. the javascript that vladdy wrote works fine in IE...
coothead
04-30-2004, 09:44 AM
Hi there cate,

As I indicated before, 'onmouseover' is supported by Netscape.
If it is not working for you, then you must have made an error
in the script that is being called by onmouseover
<script type="text/javascript">
//<![CDATA[
function test(){
alert("\n____________________________\n\n"+
"onmouseover working in Netscape !\n"+
"____________________________")
}
//]]>
</script>

<a href="#" onmouseover="test()">onmouseover</a>

coothead
PhillMc
04-30-2004, 01:22 PM
Dont use 'onMouseOver'. There is a better way!!! Use CSS! Like so:

<style>
a {
background: url(images/img1.jpg) top repeat-x;
}

a:hover {
background: url(images/img2.jpg) top repeat-x;
}
</style>


That will work in just about any browser :) Just be sure to place it between the <head> tags.
tonyh
04-30-2004, 02:51 PM
The problem with using background for an image is that it will not resize with an elastic layout, that is, if you are using relative font units such as em.

Of course, if you are using static font sizes and pixel width/heights then this isn't a problem. And I know of a few who wouldn't appreciate your hard efforts....

So far, the only way I've determined to be able to use an image mouseover, and still use ems, is to do a swap with JS. It's simple cross-browser code, but some don't appreciate using JS unnecessarily as well... mind you an image mouseover really isn't necessary either.

Actually, that's a bit of a lie, I found an article (and of course now I can't find it) that showed how to do some simple colour changes using the anchor hover and a transparent gif (his example used BMP, and I couldn't figure out how he was doing it, so I'm using a transparent gif). Make the anchor background property the initial wanted colour (such as body bgcolour), then change the background colour on the anchor's hover. If the anchor is display: block, and given the same dimensions of the image, then the image will resize with font size. Plus, only one image is used rather than several. Of course, this is fairly limited, as it only works with solid colors, but will do simple FX like outlines, emulated dropshadows, full color swaps, ect nicely. And I'm sure even greater FX could be generated using PNG, if it were fully supported....
PhillMc
04-30-2004, 02:57 PM
True, but is not CSS much more "cross-browser" than JS??
tonyh
04-30-2004, 03:09 PM
Originally posted by PhillMc
True, but is not CSS much more "cross-browser" than JS??
Yes, which why I posted the second extremely limited solution.

Your wonderful CSS background rollover isn't going to do squat if it doesn't resize for those with accessibility needs. I'm using the original CSS hover solution on one of my current projects, and although the images seems to be okay at medium and larger font sizes, the difference is noticeably odd and out of place. It's even worse if some wants to reduce their font size, as the image then looks far too large.

I've been told that CSS3 will allow background images to resize, but like most CSS these days, I doubt it'll be fully supported.
PhillMc
04-30-2004, 11:52 PM
CSS1 is widely supported (with exception ot IE's incorrect implementation). The 'Wonderful' CSS solution WILL work in all browsers (mainstream at least) but, the JavaScript 'onMouseOver' solution will only work for 83% of users. Based on that, I will stick with my 'wondenful' CSS:D
TomDenver
05-01-2004, 04:23 AM
Cate, please post your JavaScript for the image swap. It sounds to me like you may be using IE specific JavaScript. Specifically, does your code contain "document.all" in it? If so, it will only work in IE. Use "document.getElementById" instead. CSS is a better solution, though.
PhillMc
05-01-2004, 12:07 PM
^^^:D^^^

Totally agreed :)
cate
06-19-2004, 07:59 AM
hi TomDenver,
I think you might be right about the IE specific Javascript:

<script type="text/javascript">
function preview(elemid)
{ cp = document.getElementById('CP');
for(var i=0; i<cp.childNodes.length; i++) cp.childNodes[i].style.display = 'none';
document.getElementById(elemid).style.display = 'block';
return;
}
</script>

thats what I have (unfortunately Im not in a position yet to alter code myself, do you have any ideas how I make it Netscape compatible?)
:)
PhillMc
06-19-2004, 09:27 AM
The effects that you are attempting to achieve in that script can be done with CSS. And, the use of CSS in your document(s) will make it compatible with Netscape and just about any other Mainstream browser. Check out w3schools.com, they'll tell ya all you need to know :)
cate
06-19-2004, 09:37 AM
hi phillmc,
thanks, ill have a look - though ive been having problems with divs and CSS, in that my layout is in a table (which is know isn't the best option) and is centered. When I use divs and css my horizontal nav bar is in a different position in IE and netscape, and moves when the page is minimised etc. any ideas what i'm doing wrong?
cheers,
Cate
cate
06-19-2004, 09:45 AM
"sorry phillmc, wrong topic! my head was thinking drop down lists rather than the gallery - will try and get my head around CSS for that)

right, im officially completely confused! My goals for this week were to create a mouseover image gallery - thumbnails on left, large image appearing on right - and a simple drop down menu that works on a horizontal nav bar and that stays in the same position in IE and netscape. Can anyone lead me through how to go about these before I go crazy?!:(
PhillMc
06-19-2004, 10:48 AM
Keeping the element in the same place on both Internet Explorer and Netscape or other Mozilla core browser may prove to be difficult. IE tends to "LineBreak" in places the document didn't specify; this can happen due to server-side intructions that are coded before or after the element. IE see's that instruction and, for some stupid reason, throws a line-break in. It also happens when tags aren't placed incode the way IE thinks it should be. CSS again will be your best bet here. The key is to specify sizes and attributes for EVERYTHING relitive to what you are doing. Do not rely on browser defaults, that will get you into trouble :).

For the image galary, the best way that I see to do it is to define a class for thumbnails and one for the normal images. Set the thumbnail class' float attribute to left and set the image class' float attribute to, you guessed it, right. If the margins and such are set properly, these images will sit on the same line, but seperated :). Keep browsing through w3schools.com and check out the CSS at CSSZenGarden.com by view the source, or selecting one of their anchors to see how it was put together (they wont mind, that's why the site is there ;)). Good Luck and Happy Coding!
cate
06-19-2004, 12:03 PM
thanks phillmc :)
PhillMc
06-19-2004, 01:13 PM
No problem. Good Luck :)