Gå til innhold

Dreamweaver - få bilde til å vises når man fører musa over

Mettemor68

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
JarlG

JarlG

Skrevet
Skrevet (endret)

Dette kan utføyras med ein funksjon i CSS som heiter :hover. Dersom du f.eks. har følgjande html:

 

<html>
...
<body>
...
<p id="text"> Hello, world! </p>
...
</body>
</html>

 

Så kan du få denne div'en til å endre farge via CSS;

 

body {
color: green;
...
}

#text:hover { 
color: gray; /* Når musepekeren er over div'en, skal teksten bli grå. */
}

Håpar det hjalp. :)

Endret av JarlG
Lenke til kommentar
Mettemor68

Mettemor68

Skrevet
  • Forfatter
Skrevet

Det var nok ikke akkurat det jeg mente da. Tenk deg en liste med 100 navn, f.eks. klubbmedlemmer, så når man fører musen over navnene så kommer bilde av personen opp. Litt tungvint med css da, blir jo en regel pr. person....Må finnes enklere måte å gjøre det på?? Flere ideer?

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet

Gjorde det her selv for en stund siden, kan gjøres 100% med CSS - drit i JS greiene

 

Skal finne kodene, så poster jeg tilbake (poster det her først så du evt ser det og avventer jquery saken)

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet (endret)

Her har jeg brukt det jeg tror du mener:

http://andreasodegard.com/stargate-sgl/

(ikke første fremsviser, men de andre som er skjult av tekst)

 

HTMLen som spytter ut tekst/bilde ser slik ut:

 

<div class="sgl">
<h2 style="text-align: center;">Crysis (July 25 2009)</h2>
<div class="flashc">
<img src="http://andreasodegard.com/wp-content/uploads/2009/07/crysis.png" alt="crysis" title="crysis" width="550" height="400" class="alignnone size-full wp-image-995" />
</div></div>

 

 

CSSen ser slik ut:

 

.sgl {
text-align: center;
}

.sgl .flashc {
display: none
}

.sgl:hover .flashc {
display: block;
}

 

Første CSS spesifiserer bare sentrering så den er ikke relevant

 

Andre CSS spesifisering viser til at når du har en "flasc" div inni en "sgl" div, skal innholdet i flasc være skjult.

 

Tredje CSS spesifisering sier at når musen føres over innholdet i sgl div'en, skal flasc div'en overstyre display: none med display: block ("normal" visning)

 

Dette er en grei måte som ikke krever mye (JS er forsåvidt greit, men personlig liker jeg å hodle det til det minimale) og som kan gjøres 100% i CSS. Resultatet ser du på linken.

Endret av Slettet+89234341
Lenke til kommentar
Mettemor68

Mettemor68

Skrevet
  • Forfatter
Skrevet
Her har jeg brukt det jeg tror du mener:

http://andreasodegard.com/stargate-sgl/

(ikke første fremsviser, men de andre som er skjult av tekst)

 

HTMLen som spytter ut tekst/bilde ser slik ut:

 

<div class="sgl">
<h2 style="text-align: center;">Crysis (July 25 2009)</h2>
<div class="flashc">
<img src="http://andreasodegard.com/wp-content/uploads/2009/07/crysis.png" alt="crysis" title="crysis" width="550" height="400" class="alignnone size-full wp-image-995" />
</div></div>

 

 

CSSen ser slik ut:

 

.sgl {
text-align: center;
}

.sgl .flashc {
display: none
}

.sgl:hover .flashc {
display: block;
}

 

Første CSS spesifiserer bare sentrering så den er ikke relevant

 

Andre CSS spesifisering viser til at når du har en "flasc" div inni en "sgl" div, skal innholdet i flasc være skjult.

 

Tredje CSS spesifisering sier at når musen føres over innholdet i sgl div'en, skal flasc div'en overstyre display: none med display: block ("normal" visning)

 

Dette er en grei måte som ikke krever mye (JS er forsåvidt greit, men personlig liker jeg å hodle det til det minimale) og som kan gjøres 100% i CSS. Resultatet ser du på linken.

 

Da må du forklare nærmere "flashc" og "sql".

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet (endret)

Det er bare navn på DIV tags. "Stargate Lambda" -> sgl, "flash content"->flashc. Du har aldri vært borti css før antar jeg?

Endret av Slettet+89234341
Lenke til kommentar
Mettemor68

Mettemor68

Skrevet
  • Forfatter
Skrevet
Det er bare navn på DIV tags. "Stargate Lambda" -> sgl, "flash content"->flashc. Du har aldri vært borti css før antar jeg?

Joda, jobber med web jeg og css, men er ikke utlært :)) Heldigvis lærer man så lenge man lever. Men takk for hjelpen, jeg får se hvilken variant jeg velger, navnlista, eller rettere sagt listene, ligger i iframes og bli samlet på en side som er laget fra en template, så jeg må prøve meg litt frem hva som fungerer.

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet

Du kan bruke samme CSS shit på alle kontaktene, bare bytte ut bilde og tekst. Det her er absolutt det enkleste, to divs og det er det.

Lenke til kommentar
Mettemor68

Mettemor68

Skrevet
  • Forfatter
Skrevet

Ser at denne var veldig "handy", men jeg får følgende problem: navnlista er i tabeller, bilde skyver cellene nedover når bildet vises, listene mine er i iframes, må derfor skrolle for å se bildene når alle listene (i iframes) samles på min hoved-liste-side. På cdon-siden ligger bildene "oppå" tabellen og der er vel den jquery-greia sikkert bedre. Eller har du en annen løsning for å kunne bruke css?

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet (endret)

Tabeller er noe jeg aldri bruker, skaper bare trøbbel, trøbbel og enda mer trøbbel. har du en link så det er lettere å se problemet?

 

EDIT: tror jeg skjønner; du må scrolle iframen?

Endret av Slettet+89234341
Lenke til kommentar
Mettemor68

Mettemor68

Skrevet
  • Forfatter
Skrevet

Hei igjen.

Lightbox kjenner jeg godt til og bruker den, men som du sier, man må trykke på bildet. Ellers er den kjempefin!

Nå ville jeg ha det slik at ved mouseover så kommer bildet opp.

Grunnet til at jeg bruker iframes er at jeg har en del lister på forskjellige sider som jeg samler på en side. Så for å slippe å oppdatere listene på de forskjellige stedene oppdaterer jeg bare den ene iframe´n og dermed er alle oppdatert. Mye arbeid spart. Din metode for dette virket kjempefint i iframes, jquery ikke, da ble det en konflikt med lightbox som jeg bruker i template´n.

 

Men det finnes sikkert andre måter å sammenkjøre de listene uten at jeg bruker iframes...er alltid åpen for ny lærdom :)

Bildene åpner seg i iframen og ikke "oppå" i hovedsiden. weblinker i en iframe gir jeg bare target´n parent så åpner de seg i hovedsiden, men får altså ikke det til her med bildene.

Lenke til kommentar
Gjest Slettet+89234341

Gjest Slettet+89234341

Skrevet
Skrevet (endret)

JS konflikter kjenner jeg altfor godt til, derfor jeg ikke likte jquery-ideen.

 

Du kan fint erstatte iframes med PHP. En sentral liste, som lastes inn som del av andre sider med PHP. Dette anbefales alltid over iframes, iallefall i min bok.

 

Her er et eksempel jeg laget for å demonstrere:

http://www.andreasodegard.com/mettemor68/

 

Det ser helt ut som en vanlig side med 4 linjer, MEN navnene kommer fra et eget, eksternt dokument.

 

index.php ser slik ut:

 

<html>
<head>
</head>
<body>

Dette er en mengde lister!

<?php include ("lister.php"); ?>

</body>
</html>

 

 

Mens lister.php ser slik ut:

 

<br>
peter
<br>
gunnar
<br>
jørgen

 

Her er altså navnene eksterne.

Endret av Slettet+89234341
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...