WordPress DK Forum

1. 

   Domiino
   

   Medlem
   Joined: sep '08
   Posts:

   Reputation:

    

   Er der nogen der kan sige mig hvordan jeg får lavet en Mouseover effekt, så den skifter billede når man ruller henover billederne med musen?

   Skrevet 2 years siden #
2. 

   boldt
   

   Supermedlem
   Joined: apr '08
   Posts:

   Reputation:

    

   se her: http://wordpress.dk/forum/topic/mouse-over-effekt-pa-billeder

   Skrevet 2 years siden #
3. 

   Domiino
   

   Medlem
   Joined: sep '08
   Posts:

   Reputation:

    

   Hvem snakker om at gøre billederne lysere? Jeg vi skifte billede.... det er ikke helt det samme desværre....

   Skrevet 2 years siden #
4. 

   boldt
   

   Supermedlem
   Joined: apr '08
   Posts:

   Reputation:

    

   Du kan sætte billeder i css som baggrund, derfor henviste jeg til tidligere debat.

   du også kan gøre sådan:
   <img src="image_01.gif" onmouseover="this.src='image_02.gif'" onmouseout="this.src='image_01.gif'">
   men dine billeder skal nok ikke være for store, da mouseover nok bliver lidt sløv.

   Skrevet 2 years siden #
5. 

   Frank
   

   Supermedlem
   Joined: mar '07
   Posts:

   Reputation:

    

   Man kan preloade billederne.
   Her er link til forklaring og en generator: http://www.webdeveloper.com/javascript/javascript_preload_roll.html

   /Frank

   Skrevet 2 years siden #
6. 

   Thomas Clausen
   

   Supermedlem
   Joined: mar '07
   Posts:

   Reputation:

    

   Jeg har brugt forskellige mouse-over effekter på ét af mine sites, og det er lidt kompliceret at sætte op. I hvert fald via stylesheetet, men jeg kan lige summere op hvordan jeg har gjort her eksempelvis.

   1. Billedet jeg har lavet er dette: http://www.trendminers.dk/wp-content/themes/hybrid-news/YesNo.png Du kan se det indeholder både min mouse-over og mouse-away effekt. Det er vigtigt at de to billeder er symmetriske, for ellers vil billedet hoppe og danse.

   2. Jeg smider så følgende ind i mit stylesheet:
   

   #YesNo {
     display: block;
     float: right;
     width: 347px;
     height: 346px;
     background: url("YesNo.png") no-repeat 0 0;
   }
   
   #YesNo:hover {
     background-position: 0 -346px;
   }
   
   #YesNo span {
     display: none;
   }

   Det som der står her er dybest set, at når jeg ikke har musen over billedet, så skal det vise den øverste halvdel og når jeg mouse over, så det vise den nederste halvdel.

   3. Jeg har så smidt følgende ind på et indlæg, men det kunne også være en side eller noget helt tredje:
   <a id="YesNo" title="Skriv til mig, det koster ikke noget :-)" href="/kontakt"><span>YesNo</span></a>

   id og span er vigtige, for det er dem som fortæller at der skal kigges i stylesheetet for at fortolke billedet

   Håber det giver mening for dig. Ellers må du jo spørge pænt ;-)

   Leger meget med Web guf, IP-telefoni og salg af lækkert design

   Skrevet 2 years siden #
7. 

   Steffen Jørgensen
   

   stffn.dk
   Joined: feb '09
   Posts:

   Reputation:

    

   #YesNo span {
display: none;
}

   Den er bare ikke så god, når man snakker SEO...
   Google set det som negativt, hvis der er noget tekst, der har display:none;, brug istedet:

   text-indent:-9999px;

   http://stffn.dk / http://jint.dk / http://photo.jint.dk

   Skrevet 2 years siden #

RSS feed for this topic

Svar

Du skal være logget ind for at skrive.