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 [cs...@lists.css-discuss.org] 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/