LinkBack URL
About LinkBacks
ZitierenServus,
ich versteh dein Problem grad nicht...funktioniert doch super wenn du den header meinst.
Hallo allerseits,
ich bin Anfänger in der CSS-Gestaltung und stehe vor folgendem Problem: in der unten stehenden Imagemap (adaptiert von Stu Nicols Lösung), die einen Bildwechsel implementiert, wenn die Maus über das Bild fährt, funktioniert der Prozess nur, wenn sich die Maus von links nach rechts, nicht von rechts nach links bewegt. Das wird deutlich, wenn man sich das live anguckt: http://ciwi.eu/joomla
Ich vermute, es handelt sich um ein Problem mit der Anordnung der Bilder übereinander, kann jedoch den Fehler nicht finden. Meine Lösung unterscheidet sich von den meisten anderen, die im Netz kursieren, dadurch, dass das vollständige Bild von mehreren anderen je nach Mausposition überlagert wird - nicht nur ein Background-Image durch ein (kleineres) HTML-Element.
Kann mir jemand weiterhelfen bzw. einen Code Fix vorschlagen?
Herzlichen Dank!
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> Stu Nicholls | CSS Image Map #10</title> <meta name="Author" content="Stu Nicholls" /> <style type="text/css"> /* set up the font to be used for the page */ body {font-family: tahoma; arial, sans-serif;} /* set the size of the definition list <dl> and add the background image */ #imap {display:block; width:1050px; height:180px; background:url(http://www.ciwi.eu/joomla/images/design/images/ciwi_fp_banner.jpg) no-repeat; position:relative;} /* set up the definition list <dt><a> to hold the background image for the hover state */ #imap a#title {display:block; width:1050px; height:0; padding-top:240px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(http://www.ciwi.eu/joomla/images/design/images/ciwi_fp_banner_blurmiddle.jpg) no-repeat 400px 400px; cursor:default;} /* the hack for IE pre IE6 */ * html #imap a#title {height:240px; he\ight:0;} /* the <dt><a> hover style to move the background image to position 0 0*/ #imap a#title:hover {background-position: 0 0; z-index:10;} /* place the <dd>s in the correct absolute position */ #imap dd {position:absolute; padding:0; margin:0;} #imap #picp {left:36px; top:46px; z-index:20;} #imap #picr {left:113px; top:76px; z-index:20;} #imap #picj {left:192px; top:50px; z-index:20;} #imap #picg {left:262px; top:60px; z-index:20;} /* style the <dd><a> links physical size and the background image for the hover */ #imap a#paul, #imap a#ringo, #imap a#john, #imap a#george {display:block; width:85px; height:85px; background:transparent url(../images/hover.gif) -100px -100px no-repeat; text-decoration:none; z-index:20;} /* style the span text so that it is not initially displayed */ #imap a span, #imap a:visited span {display:none;} /* move the link background image to position 0 0 when hovered */ #imap a#paul:hover, #imap a#ringo:hover, #imap a#john:hover, #imap a#george:hover {background-position:0 0;} /* define the common styling for the span text */ #imap a:hover span {position:absolute; width:388px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;} /* the hack for IE pre IE6 */ * html #imap a:hover span {width:400px; w\idth:388px;} /* move the span text to a common position at the bottom of the image map */ #imap a#paul:hover span {left:-36px; top:200px;} #imap a#ringo:hover span {left:-113px; top:170px;} #imap a#john:hover span {left:-192px; top:196px;} #imap a#george:hover span {left:-262px; top:186px;} /* add the style for the link span text - first line */ #imap a span:first-line {font-weight:bold; font-style:italic;} #ads {margin-top:150px;} </style> </head> <!--[if lte IE 6]> <style> #ads {display:none;} #adsie {clear:both; width:750px; margin-top:150px;} </style> <![endif]--> <body> <h2>A CSS Image Map.</h2> <h3>Example #10</h3> <h4>Styling the first line of the text</h4> <dl id="imap"> <dt><a id="title" href="#nogo" title="The Beatles">The Beatles</a></dt> <dd id="picp"><a id="paul" title="Paul McCartney" href="#nogo"><span>Paul McCartney - Bass Guitar and Vocals<br /><br />Paul McCartney's song, Yesterday, recently voted the most popular song of the century by a BBC poll, was initially composed without lyrics. Paul used the working title 'scrambled eggs' before coming up with the final words.</span></a></dd> <dd id="picr"><a id="ringo" title="Ringo Starr" href="#nogo"><span>Ringo Starr - Drums<br /><br />Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, when she wouldn't come out and play with Mia and the Beatles at a religious retreat in India.</span></a></dd> <dd id="picj"><a id="john" title="John Lennon" href="#nogo"><span>John Lennon - Guitar and Vocals<br /><br />In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool contest principally because they called in posing as different people and voted for themselves numerous times.</span></a></dd> <dd id="picg"><a id="george" title="George Harrison" href="#nogo"><span>George Harrison - Lead Guitar and Vocals<br /><br />The Beatles' last public concert was held in San Francisco's Candlestick Park on August 29, 1966.</span></a></dd> </dl> <div id="ads"> <object data="../../ads.htm" type="text/html" width="728" height="90"></object> </div> <!--[if lte IE 6]> <div id="adsie"> <script type="text/javascript"> google_ad_client = "pub-6651950180071236"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; google_ad_channel =""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "697210"; google_color_url = "E09222"; google_color_text = "330000"; </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> <![endif]--> </body> </html>
Servus,
ich versteh dein Problem grad nicht...funktioniert doch super wenn du den header meinst.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)