Søg
Avatar billede tommy_carstensen Nybegynder
25. november 2004 - 14:40 Der er 8 kommentarer og
1 løsning

onmouseover, layer, z-index

Er det muligt at lave følgende:
http://www.proteinkemi.dk/eksperten/eksperten2.gif
Der er tale om ét billede, hvorfor det ikke går med alm. image swap..!

Det skal fungere som http://schaefner.dk/files/temp/exp/564464/, men det må ikke være et baggrundsbillede, da jeg har et image map og masser af href's på billedet.

Jeg vil gerne betale 50 kroner for en færdig løsning, men det sjoveste er, hvis jeg bare får et hint til, hvordan det skal laves.
Avatar billede roenving Novice
25. november 2004 - 15:09 #1
F.eks. sådan:

<div style="position:relative;width:200px;">
  <img src="trafiklys.gif" style="width:200px;height:600px;position:absolute;">
  <img src="billede0.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
  <img src="billede1.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
  <img src="billede2.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
</div>
Avatar billede tommy_carstensen Nybegynder
25. november 2004 - 15:39 #2
Hej roenving,

Billederne bliver ganske rigtigt kaldt frem ved onmouseover, men de ligger skjult bag trafiklys.gif jf. http://www.proteinkemi.dk/eksperten/565045/
Jeg havde forestillet mig, at man ved onmouseover kunne ændre billedernes z-index? Din løsning er dog også fin, hvis det ikke var, fordi billederne ligger bag trafiklys.gif
Avatar billede tommy_carstensen Nybegynder
25. november 2004 - 15:46 #3
Kunne man f.eks. ved onmouseover skifte fra "blåt billede" til "rødt billede" jf. http://www.proteinkemi.dk/eksperten/565045/z-index.html ?
Avatar billede tommy_carstensen Nybegynder
25. november 2004 - 16:05 #4
Har prøvet følgende, der ikke virker:

<div style="position:relative;width:200px;">
  <img src="trafiklys.gif" style="width:200px;height:600px;position:absolute; z-index: 2">
  <img src="billede0.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; z-index: 1" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
  <img src="billede1.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; z-index: 2" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
  <img src="billede2.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; z-index: 3" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
</div>
Avatar billede tommy_carstensen Nybegynder
25. november 2004 - 16:29 #5
Læste http://eksperten.dk/spm/215104 og ændrede derefter til nedenstående, som virker. Smid et svar roenving, så jeg kan give dig dine velfortjente point. Jeg er glad lige nu.

<div style="position:relative;width:200px;">
  <img src="trafiklys.gif" style="width:200px;height:600px;position:absolute;">
</div>
<div style="position:relative;width:200px;">
  <img src="billede0.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
  <img src="billede1.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
  <img src="billede2.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="this.filters.alpha.opacity=100;this.style.MozOpacity=1;this.style.opacity=1;" onmouseout="this.filters.alpha.opacity=0;this.style.MozOpacity=0;this.style.opacity=0;">
</div>
Avatar billede tommy_carstensen Nybegynder
25. november 2004 - 16:40 #6
Fik faktisk kogt det helt ned til:

<div>
  <img src="trafiklys.gif" style="position:absolute;">
</div>
<div style="position:relative;width:200px;">
  <img src="billede0.jpg" style="filter:alpha(opacity=0);" onmouseover="this.filters.alpha.opacity=100;" onmouseout="this.filters.alpha.opacity=0">
  <img src="billede1.jpg" style="filter:alpha(opacity=0);" onmouseover="this.filters.alpha.opacity=100;" onmouseout="this.filters.alpha.opacity=0">
  <img src="billede2.jpg" style="filter:alpha(opacity=0);" onmouseover="this.filters.alpha.opacity=100;" onmouseout="this.filters.alpha.opacity=0">
</div>
Avatar billede roenving Novice
26. november 2004 - 13:26 #7
Velbekomme '-)

-- årsagen til at du kan koge det ned er, at du kun har prøvet det i IE, som (såvidt jeg ved !-) er den eneste browser, som bruger de proprietære M$-filters ...

Selvfølgelig bliver koden længere, hvis man også skal understøtte andre browsere, men det er for mig utilgiveligt ikke at gøre det, hvis man skal bruge det på internettet !o]

-- og så nåede jeg ikke lige at påpege den principielt bedre løsning, at sætte det som en javascript-funktion:

<script type="text/javascript">
function visSkjul(obj,opacity){
  if(obj.filters)obj.filters.alpha.opacity=100*opacity;
  obj.style.MozOpacity=opacity;
  obj.style.opacity=opacity;
}
</script>

<div style="position:relative;width:200px;">
  <img src="trafiklys.gif" style="width:200px;height:600px;position:absolute;">
</div>
<div style="position:relative;width:200px;">
  <img src="billede0.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="visSkjul(this,1)" onmouseout="visSkjul(this,0)">
  <img src="billede1.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="visSkjul(this,1)" onmouseout="visSkjul(this,0)">
  <img src="billede2.jpg" style="width:200px;height:200px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onmouseover="visSkjul(this,1)" onmouseout="visSkjul(this,0)">
</div>
Avatar billede tommy_carstensen Nybegynder
27. november 2004 - 16:07 #8
Hej roenving,

Det skal bruges på arbejdets intranet (Novo), hvor der kun bliver brugt IE, så det går nok :) Jeg har bare ledt efter en god løsning på mit problem i lang tid, så jeg er meget taknemmelig.

God weekend!
Avatar billede roenving Novice
29. november 2004 - 14:05 #9
Tak for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 14:53 TV4ever 3.0 Af valby i Diverse
I går 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I går 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
White papers
Flere white papers »