Avatar billede mikmakmuk Nybegynder
08. marts 2008 - 21:22 Der er 7 kommentarer

Problem med at bytte billeder

Hej Eksperter,

Jeg forstår ikke hvad der er galt med det her :-( Det er meningen at der til at starte med skal vise et billede (billede0). Det skal så skiftes ud med de andre når man peger på det. Det vil sige der skal være 5 usynlige bokse ovenpå billede0, som på onMouseOver bytter billedet ud. Problemet er at de 5 bokse kommer til at stå under billede0. Håber det er til at forstå :-)

<div id="container" style="background-image:url('billede0.gif');background-repeat:no-repeat;">&nbsp;
<div style="width:50px;height:50px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(billede1.gif)'"></div>
<div style="width:50px;height:50px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(billede2.gif)'"></div>
<div style="width:50px;height:50px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(billede3.gif)'"></div>
<div style="width:50px;height:50px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(billede4.gif)'"></div>
<div style="width:50px;height:50px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(billede5.gif)'"></div>
<div style="clear:both;"></div>
</div>
Avatar billede roenving Novice
09. marts 2008 - 23:43 #1
Lad den ydre container bare være en container med position:relative, så kan du lægge de andre absolut inden i ...

-- men jeg kan ikke lige få billedet frem om, hvordan der kan skiftes, for hvis det er onmouseover vil billederne jo skifte så hurtigt, som browseren kan finde dem frem (og så går det stærkt, når først billederne er i cachen !-)
Avatar billede mikmakmuk Nybegynder
10. marts 2008 - 10:09 #2
Det jeg har lavet virker sådan set. Problemet er bare at de "usynelige" bokse havner under billedet og ikke overpå det. Det kommer ligesom et linieskift
Avatar billede roenving Novice
12. marts 2008 - 14:33 #3
Men det første i den omkransende boks er jo også et linjeskift ?-)
Avatar billede roenving Novice
12. marts 2008 - 14:34 #4
-- fordi diverne er block-level, vil de placere sig under mellemrummet ...
Avatar billede mikmakmuk Nybegynder
25. marts 2008 - 08:29 #5
Jeg fatter det altså stadig ikke

<div id="container" style="background-image:url('http://URL/gif0.gif');background-repeat:no-repeat;">&nbsp;
<div style="width:14px;height:14px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(http://URL/gif1.gif)'"></div>
<div style="width:14px;height:14px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(http://URL/gif2.gif)'"></div>
<div style="width:14px;height:14px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(http://URL/gif3.gif)'"></div>
<div style="width:14px;height:14px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(http://URL/gif4.gif)'"></div>
<div style="width:14px;height:14px;background:transparent;float:left" onMouseOver="document.getElementById('container').style.backgroundImage='url(http://URL/gif5.gif)'"></div>
<div style="clear:both;"></div>
</div>
Avatar billede mikmakmuk Nybegynder
26. marts 2008 - 14:59 #6
Den eneste løsning jeg efterhånden kan se er at lave divs om til spans og så ligge en tranparent gif på for at tvinge den til at være 14X14
Avatar billede roenving Novice
26. marts 2008 - 16:46 #7
Hvad laver &nbsp; i den første linje ?-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester