 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
beth
Joined: 14 Apr 2006
Posts: 1
|
 Posted: Fri Apr 14, 2006 9:31 am OnMouseOver and OnMouseOut js not quite working |
 |
|
|
My problem is I am trying to create edit and delete image links that only appear as you hover over the item. I can get it to work slightly. I have it embeded in a table but the images do not appear when hovered over and also when you add multiple href links they all seem to use the same onmouse images on the same element. Here is my code if anyone can make some sense of my madness.
<html>
<head>
<style>
table a:hover{background:red;}
</style>
<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>
<SCRIPT TYPE="text/javascript">
<!--
setrollover('/images/trash_can.gif', 'trash');
setrollover('/images/edit.gif','edit');
//-->
</SCRIPT>
</head>
<title>Just Checking</title>
<body>
<table>
<tr onMouseOver = "rollover('trash');rollover('edit')" onMouseOut = "rollout('trash');rollout('edit')">
<td><A HREF="/images/trash_can.gif">
<IMG SRC="/images/trash_can1.gif" NAME="trash"
ALT="remove" BORDER=0 HEIGHT=10 WIDTH=10></A>
<A HREF="/images/edit.gif">
<IMG SRC="/images/edit1.gif" NAME="edit"
ALT="edit" BORDER=0 HEIGHT=10 WIDTH=10></A>fun fun fun
</td>
</tr>
<tr onMouseOver = "rollover('trash');rollover('edit')" onMouseOut = "rollout('trash');rollout('edit')">
<td><A HREF="/images/trash_can.gif">
<IMG SRC="/images/trash_can1.gif" NAME="trash"
ALT="remove" BORDER=0 HEIGHT=10 WIDTH=10></A>
<A HREF="/images/edit.gif">
<IMG SRC="/images/edit1.gif" NAME="edit"
ALT="edit" BORDER=0 HEIGHT=10 WIDTH=10></A>fun fun fun
yup yup yup????
</td>
</tr>
</table>
</body>
</html> |
|
kanenas
Joined: 14 Dec 2004
Posts: 191
|
| Posted: Sun Apr 23, 2006 7:32 pm It's a simple name collision |
|
|
|
The reason rollover works on the first row only is that all trash can images share the same name and all edit images share the same name, so image names are ambiguous. If I write "document.images['trash']", does that refer to the trash can image in the first row or the second? The smallest change to your script is thus to give images unique names. Once I did this, everything worked, suggesting that the problem with images not appearing is probably due to mistyped URLs (e.g. 'images/edit.gif' vs '/images/edit.gif').
| Code: |
<SCRIPT TYPE="text/javascript">
<!--
setrollover('/images/trash_can.gif', 'trash0');
setrollover('/images/edit.gif','edit0');
setrollover('/images/trash_can.gif', 'trash1');
setrollover('/images/edit.gif','edit1');
//-->
</script>
...
<tr onMouseOver = "rollover('trash0');rollover('edit0')" onMouseOut = "rollout('trash0');rollout('edit0')">
<td><A HREF="/images/trash_can.gif">
<IMG SRC="/images/trash_can1.gif" name="trash0"
ALT="remove" BORDER=0 HEIGHT=10 WIDTH=10></A>
...
|
As it's slightly unwieldy to set up the rollover for each, I recommend using classes to set the rollover image. Furthermore, the 'id' attribute is generally taken to be the most appropriate for identifying a particular element, so I switched to using the 'id' attribute and document.getElementById in the example code.
| Code: |
<SCRIPT TYPE="text/javascript">
<!--
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageClass)
{
if (! document.images) return;
if (! pageImageClass)
pageImageClass = document.images[document.images.length-1].className;
rollOverArr[pageImageClass]= {overImg: new Image};
rollOverArr[pageImageClass].overImg.src=OverImgSrc;
}
function rollover(pageImageId)
{
if (! document.getElementById)return;
var img = document.getElementById(pageImageId);
if (! rollOverArr[img.className])return;
if (! rollOverArr[img.className].outImg) {
rollOverArr[img.className].outImg = new Image;
rollOverArr[img.className].outImg.src = img.src;
}
img.src=rollOverArr[img.className].overImg.src;
}
function rollout(pageImageId)
{
if (! document.getElementById)return;
var img = document.getElementById(pageImageId);
if (! rollOverArr[img.className])return;
img.src=rollOverArr[img.className].outImg.src;
}
setrollover('/images/trash_can.gif', 'trash');
setrollover('/images/edit.gif','edit');
//-->
</script>
...
<td><A HREF="/images/trash_can.gif">
<IMG SRC="/images/trash_can1.gif" id="trash0" class="trash"
ALT="remove" BORDER=0 HEIGHT=10 WIDTH=10></A>
...
|
You may find it interesting that, image rollover can be handled entirely by CSS2. Here's one way, using the "display" attribute. With a bit of HTML abuse, you can get the example to work in IE. As it stands, the example doesn't work in IE because it doesn't support the :hover pseudoclass on non-anchor elements.
| Code: |
<style type="text/css">
.rollover.display img
{
border: 2px solid silver;
}
.rollover.display img.hover
{
display: none;
}
.rollover.display p:hover img.hover {
display: inline;
}
.rollover.display p:hover img.grounded {
display: none;
}
</style>
<div class="rollover">
<p>
<A HREF="/images/trash_can.gif" class="trash"><img src="/images/trash_can1.gif" class="grounded"><img src="/images/trash_can.gif" class="hover"></a>
<A HREF="/images/edit.gif" class="edit"><img src="/images/edit1.gif" class="grounded"><img src="/images/edit.gif" class="hover"></a>
</p>
<p>
<A HREF="/images/trash_can.gif" class="trash"><img src="/images/trash_can1.gif" class="grounded"><img src="/images/trash_can.gif" class="hover"></a>
<A HREF="/images/edit.gif" class="edit"><img src="/images/edit1.gif" class="grounded"><img src="/images/edit.gif" class="hover"></a>
</p>
</div>
|
You'll note the lack of tables. I don't use tables for layout, only for data which is best presented in tables.
Here's another CSS rollover, using the 'content' attribute, which is even less supported among browsers than ':hover'.
| Code: |
<style>
.rollover p {
padding: 1px;
}
.rollover p a.trash:before {
content: url('/images/trash_can1.gif');
}
.rollover p a.edit:before {
content: url('/images/edit1.gif');
}
.rollover p:hover a.trash:before {
content: url('/images/trash_can.gif');
}
.rollover p:hover a.edit:before {
content: url('/images/edit.gif');
}
</style>
<div class="rollover">
Content:
<p>
<A HREF="/images/trash_can.gif" class="trash"></a>
<A HREF="/images/edit.gif" class="edit"></a>
</p>
<p>
<A HREF="/images/trash_can.gif" class="trash"></a>
<A HREF="/images/edit.gif" class="edit"></a>
</p>
</div>
|
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
