Rollover et img for at få 2 imgs til at poppe op?

Tags:    html css

<< < 123 > >>
hvordan gør man det i css?



30 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma
Sorter efter stemmer Sorter efter dato
Sådan!, men eksempel må vente dinhost.net serveren er nede:roll::@:evil: men her er koderne:

HTML:
Fold kodeboks ind/udKode 


CSS:
Fold kodeboks ind/udKode 


Det er en meget dårlig løsning hvor billederne ikke popper op men bare skifter, men den virker.

Brug javascript i stedet for.



Indlæg senest redigeret d. 07.04.2008 11:58 af Bruger #13488
:hover pseudo er en CSS 2 prop, men understøttes ikke af IE6. Om de har fået den med i IE7 eller IE8 har jeg ingen idé om.

alternativt kan det laves med:

HTML:
Fold kodeboks ind/udKode 


CSS:
Fold kodeboks ind/udKode 




Indlæg senest redigeret d. 07.04.2008 18:57 af Bruger #10216
vil så have den frækhed at mene at der er ingen er jer der faktisk har givet ham en løsning der gør det han bad om.

så her er 3 javascipt løsninger der gør det han bad om og lidt til, de kan alle åbne n billeder, den ene gør det i winduer den anden appender dem bare til body og fjerner dem igen sikkert ikke særligt ønskværdigt, og den sidste sætter sourcen på n i forvejende identificeret img tags, i eksemplerne er n=2

Fold kodeboks ind/udKode 


husk at mange hader pop up vinduer, og nogle af dem har slået dem fra.





Hej Michael,
Link dog endelig.

Du skal bare huske at browsere som default vil blokere samtlige pop-ups på en mouseover - og tillader højst een pop-up pr click, med mindre en bruger har meget tillid til dig eller "unormale" indstillinger.


Hej Nørden,
Jeg fastholder at det er en dårlig løsning du er kommet med :) Nej, den er fin, men jeg bryder mig ikke specielt om pop-ups. Seriøst mener jeg dog stadig at det der var behov for var en reference til JavaScript (eller en der gad lave koden). Resten af debatten var mere for egen skyld end Michaels :D

Derudover vil din kode blive blokeret af default indstillingerne i de fleste browsere, med mindre folk aktivt trykker "accepter pop-up" et par gange.


Hej Gnu,
Jeg har dårlige erfaringer med browseres håndtering af transperans. Og det at benytte et billede er en meget uelegant løsning. Den samme effekt kan opnås ved at style <a>'en.

:hover understøttes af MS IE 7+ ! ;) Der er bare mange i 5 og 6 stadig... (min hjemmeside skider lidt på dem).


Med venlig hilse
Ieet

Ps. Sorry Michael, jeg stoppede med at prøve at hjælpe dig efter det første link til JavaScript :D




Hej Michael,

Du skal ud og have fat i noget JavaScript for den funktionalitet...

http://www.w3schools.com/jsref/jsref_onmouseover.asp

... og ellers er det du vil ikke beskrevet nok til at jeg kan komme med bedre feedback.

Med venlig hilsen
Ieet





Indlæg senest redigeret d. 07.04.2008 09:51 af Bruger #12836
Ja javascript vil udentvivl være det bedste, men prøv at tjekke www.webdesign101.dk husk at kigge under navigation. Sidst jeg kikkede var der noget med a:hover og baggrunds billeder hvor man derved kunne få nogle flere til at poppe frem.





Hej Jeppe,

img:hover eksisterer ikke.

:hover eksisterer kun på a elementer, så a:hover accepteres og virker som CSS i nye versioner af browsere.

Dermed kan image Rollovers kun laves med JavaScript, hvilket de også står under på det link du kom med :)

Med venlig hilsen
Ieet

Ps. De bør være med i XHTML 2! YAY!




Sorry tænkte mig ikke lige om:$:roll::lol:, men har fundet en løsning, poster den så snart jeg er færdig med et eksempel.



Indlæg senest redigeret d. 07.04.2008 11:59 af Bruger #13488


Hej Jeppe.

Sådan!
Glimrende og enkel løsning. I like it.

Jeg tror ikke det var det efterlyste, og eftersom width forandrer sig i resultatet vil resultatet nok ikke blive fint i en egentlig hjemmeside. Men hvis man vil kan man bare fastholde width til det samme, og lave billederne så de viser/representerer de 2 billeder.

"Popop" effekten kan laves ved at lave siden som normalt (og give dette et z-index), og lave "det der skal poppes op" med et z-index der ligger bagved resten af siden. Når der skal skiftes, eller "poppes op" skiftes z-index på de 2 sider ved hjælp af JavaScript.

Med venlig hilsen
Ieet



Sådan!
Glimrende og enkel løsning. I like it.


TAK:B;) Synes selv det er en meget.....anderledes løsning som er noget man bør holde sig væk fra always use JavaScript til popup osv..

Jeg tror ikke det var det efterlyste, og eftersom width forandrer sig i resultatet vil resultatet nok ikke blive fint i en egentlig hjemmeside.


Tror jeg heller ikke det var også bare en alternativ løsning;):)

"Popop" effekten kan laves ved at lave siden som normalt (og give dette et z-index), og lave "det der skal poppes op" med et z-index der ligger bagved resten af siden. Når der skal skiftes, eller "poppes op" skiftes z-index på de 2 sider ved hjælp af JavaScript.


Det skal helt sikkert prøves engang;)



Indlæg senest redigeret d. 07.04.2008 13:17 af Bruger #13488
<< < 123 > >>
t