Jag har verkligen strul just nu. Jag som tyckte jag var så duktig som kunnat få till en rad med småbilder som när man håller pekaren över förstoras till stora.
Har fem bilder i rad
(ex längst ner på denna sida http://www.historiesajten.se/slottdetalj.asp?id=216)
och det funkar bra i IE och FF men inte i Opera - där händer INGENTING!
Vad har jag gjort för fel? Jag har letat runt på nätet men hittar inget svar. Jag vill ju inte sitta och koda jag vill ju skriva om slott!! :r
Man kanske inte kan lägga css i en tabell?
Här är koden, skulle verklige uppskatta lite hjälp så det funkar i Opera...
<tr><td><a class="thumbnail2" href="#thumb2"><img src="slott/216_2.jpg" width="95px" height="78px" border="0"/> <span><img src="slott/216_2.jpg" width="500px"/> <br> Fontainebleau <div class="fotofran"><i>Bild från Wikimedia Commons</i></div></nobr> </span> </a> </td> <td> <a class="thumbnail3" href="#thumb3"><img src="slott/216_3.jpg" width="95px" height="78px" border="0"/> <span><img src="slott/216_3.jpg" width="500px"/> <br> <nobr> Fontainebleau - Napoleons sovrum <div class="fotofran"><i> Bild från Wikimedia Commons</i></div></nobr> </span> </a> </td> <td> <a class="thumbnail4" href="#thumb4"> <img src="slott/216_4.jpg" width="95px" height="78px" border="0"/> <span><img src="slott/216_4.jpg" width="500px"/> <br> <nobr> Fontainebleau - Marie Antoinettes sovrum </span> </a> </td> <td> <a class="thumbnail5" href="#thumb5"> <img src="slott/216_5.jpg" width="95px" height="78px" border="0"/> <span><img src="slott/216_5.jpg" width="500px"/> <br> <nobr> Fontainebleau - skiss över slottet och omnejd <div class="fotofran"><i>Bild från Wikimedia Commons</i></div></nobr> </span> </a> </td> <td> <a class="thumbnail6" href="#thumb6"><img src="slott/216_6.jpg" width="95px" height="78px" border="0"/> <span><img src="slott/216_6.jpg" width="500px"/> <br> <nobr> Fontainebleau - Frans I:s galleri <div class="fotofran"> <i>Bild från Wikimedia Commons</i></div></nobr> </span> </a> </td></tr>
.thumbnail2{ position: relative; z-index: 10; padding: 1px; } .thumbnail2:hover{ background-color: transparent; z-index: 50; } .thumbnail2 span{ /*CSS for enlarged image*/ position: absolute; background-color: #000; padding: 5px; border: 1px #fff; visibility: hidden; color: #fff; font-size:13px; font-family: verdana, arial, sans-serif; text-decoration: none; } .thumbnail2 span img{ /*CSS for enlarged image*/ border-width: 1; padding: 2px; } .thumbnail2:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 100%; left: -10px; /*position where enlarged image should offset horizontally */ } .thumbnail3{ position: relative; z-index: 10; padding: 1px; } .thumbnail3:hover{ background-color: transparent; z-index: 50; } .thumbnail3 span{ /*CSS for enlarged image*/ position: absolute; background-color: #000; padding: 5px; border: 1px #fff; visibility: hidden; color: #fff; font-size:13px; font-family: verdana, arial, sans-serif; text-decoration: none; } .thumbnail3 span img{ /*CSS for enlarged image*/ border-width: 1; padding: 2px; } .thumbnail3:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 100%; left: -108px; /*position where enlarged image should offset horizontally */ } .thumbnail4{ position: relative; z-index: 10; padding: 1px; } .thumbnail4:hover{ background-color: transparent; z-index: 50; } .thumbnail4 span{ /*CSS for enlarged image*/ position: absolute; background-color: #000; padding: 5px; border: 1px #fff; visibility: hidden; color: #fff; font-size:13px; font-family: verdana, arial, sans-serif; text-decoration: none; } .thumbnail4 span img{ /*CSS for enlarged image*/ border-width: 1; padding: 2px; } .thumbnail4:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 100%; left: -208px; /*position where enlarged image should offset horizontally */ } .thumbnail5{ position: relative; z-index: 10; padding: 1px; } .thumbnail5:hover{ background-color: transparent; z-index: 50; } .thumbnail5 span{ /*CSS for enlarged image*/ position: absolute; background-color: #000; padding: 5px; border: 1px #fff; visibility: hidden; color: #fff; font-size:13px; font-family: verdana, arial, sans-serif; text-decoration: none; } .thumbnail5 span img{ /*CSS for enlarged image*/ border-width: 1; padding: 2px; } .thumbnail5:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 100%; left: -312px; /*position where enlarged image should offset horizontally */ } .thumbnail6{ position: relative; z-index: 10; padding: 1px; } .thumbnail6:hover{ background-color: transparent; z-index: 50; } .thumbnail6 span{ /*CSS for enlarged image*/ position: absolute; background-color: #000; padding: 5px; border: 1px #fff; visibility: hidden; color: #fff; font-size:13px; font-family: verdana, arial, sans-serif; text-decoration: none; } .thumbnail6 span img{ /*CSS for enlarged image*/ border-width: 1; padding: 2px; } .thumbnail6:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 100%; left: -412px; /*position where enlarged image should offset horizontally */ }
... och sen var jag tvungen att också ha fem olika "thumbnail1" "thumbnail2" osv.. bara för att jag ville att den stora bilden skulle ligga på samma ställe, annars flyttade den sig åt höger hela tiden. Kanske finns något smartare tips där med?