Sent by Anthony L on 30 April 2009 04:04
First: If this is a repost I apologize: I chose "plain text" in GMail
but in my Sent box it appears it was sent as Rich Text, so I'm
attempting a plain text message again ...now for the 3rd time, with
most html tags stripped out ... it got bounced a few times now :-(
If you've already stopped reading, I'll understand ;-))
---------------------------------------
Hi,
I am trying to use css sprites to create rollover links on several
different spots on an image.
Essentially: an image map.
I've pieced the code below together from a few online articles and
having been finding the image coordinates using photoshop.
My dilemma is this: for the first two links "overview" and "metadata"
everything works as expected. But for the third one "lib", no matter
what I do, the rollover effect seems anchored to the left corner.
I've included the code below, in case there are any obvious errors
that I am too blind on inexperienced to see ;)
Here is the working link ... I've used a .png image so it loads a little slowly.
the link:
liberto.info/cssplay/sprite2.html
Any help would be greatly appreciated :-)
Tony
the css:
.myspriteClass {
background: url('newsprite.png');
background-position: -223px -223px; width: 600px; height: 446px;
}
/* links on image */
a#overview {
height:26px;
width:590px;
display: block;
background:url('newsprite.png') 0px 0px no-repeat;
overflow: hidden;
}
a#overview:hover {
display: block;
background:url(newsprite.png) -223px -1115px no-repeat;
overflow: hidden;
}
a#metadata {
height:27px;
width:192px;
display: block;
background:url('newsprite.png') 223px 253px no-repeat;
overflow: hidden;
}
a#metadata:hover {
display: block;
background:url(newsprite.png) -223px -1140px no-repeat;
overflow: hidden;
}
a#lib {
height:27px;
width:317px;
display: block;
background:url('newsprite.png') 426px 254px no-repeat;
overflow: hidden;
}
a#lib:hover {
display: block;
background:url(newsprite.png) -426px -1147px no-repeat;
overflow: hidden;
}
the html
<div class="myspriteClass">
<a id="overview" href="#" ></a>
<a id="metadata" href="#" ></a>
<a id="lib" href="#" ></a>
</div>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
