Gå til innhold

Image fade-in ved mouseover (hover)

toresn

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Finnduz

Finnduz

Skrevet
Skrevet
Noen som vet hvordan jeg kan få et bilde til å fade inn fra f.eks 50% gjennomsiktig til ikke-gjennomsiktig ved mouseover (hover)?

 

Helst uten bruk av Javascript.

6502399[/snapback]

 

Trenger selv hjelp til det samme. Nei, bilde skal ikke gå over til et nytt bilde. Men det skal bli gjennomsiktig. Bilde fader ut / inn i siden. Skjønner?. Kan godt bruke javascript men jeg fant ikke noe som kunne hjelpe meg. Fant masse script // hjelpe kommentarer til hvordan du skifter til et nytt bilde når musen kommer over.

Lenke til kommentar
Finnduz

Finnduz

Skrevet
Skrevet
Å bytte ut bildet ved hover med en gjennomsiktig versjon av originalbildet burde vel fungere? Det blir riktignok ikke en fade-effekt, men jeg tenkte mer på det Finnduz lurte på.

6509178[/snapback]

 

Ja, er akuratt slik jeg kunne tenke meg. Har du en linke eller no jeg kan kanske litt på?

Lenke til kommentar
Fløffi

Fløffi

Skrevet
Skrevet (endret)

Jeg lurer på det samme, for jeg kunne tenke meg å bruke effekten på min egen hjemmeside.. Finnes det ingen "enklere" måte å gjøre det på? Bytter man layout eller skal legge til flere lenker må man jo sitte å lage nye bilder.. for hver av link og hver av hoover lix. Tungvindt.. Går det ikke an å legge inn noe tranparancy=50% slik man kan gjøre i oh grusomme tabeller? slik at koden blir noe liknende med a {transparency=25%} a:hoover {trasparency=50%}

 

 

Aah man kan kanskje legge et halvtrasparent ensfarget bilde som bakgrunn på hoover-linkene?

Endret av Fløffi
Lenke til kommentar
bosannes

bosannes

Skrevet
Skrevet

Juksemetode for transculency

Bruker et bilde på toppen med bakgrunnsfargen i 33% opasitet.

For eldre IE 6 og eldre brukes et 3x3 bilde hvor kun piksel 1 og 9 har opasitet.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hover</title>
<style type="text/css">
* {
border: none;
padding: 0;
margin: 0;
}
body {
background: white;
}
ul {
list-style-type: none;
}
li {
float: left;
}
li a {
display: block;
width: 100px;
height: 30px;
background: url(trans.png);
}
li a:hover {
background: none;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
li a {
background: url(chess.png);
}
</style>
<![endif]-->
</head>

<body>
<ul>
<li style="background: url(vg.png);"><a href="http://www.vg.no/"></a></li>
<li style="background: url(google.png);"><a href="http://www.google.com/"></a></li>
<li style="background: url(diskusjon.png);"><a href="http://www.diskusjon.no/"></a></li>
</ul>
</body>
</html>

Lenke til kommentar
Kannutt

Kannutt

Skrevet
Skrevet
Kan eventuelt også lage bildet som en gif i f.eks image ready og bruke mouseover. Blir det samme, og kompatibelt med alt.

6564565[/snapback]

 

 

 

 

Lag en enkel animasjon i PS, og legg animasjonen som bakgrunnsbilde på a:hover. Gif-filen kan leses av så godt som alle plattformer. Er jo ikke tungvint det!!

Lenke til kommentar
Met_Fredrik

Met_Fredrik

Skrevet
Skrevet (endret)
Unnskyld at jeg spør om dette i denne posten, men... Er det noen her som har en enkel forklaring for hvordan man lager en animasjon i photoshop?

 

Vet at dette ikke er det rette stedet å spørre da ;)

6567551[/snapback]

 

Image ready er fint for dette, følger ikke det med photoshop? Jeg har det ihvertfall :tease:

 

Men ihvertfall, om du har image ready, så kan du åpne en gif animasjon i programmet, så ser du veldig fort hvordan du gjør det :)

 

Det du gjør, er å finne fram bildet, så dobbeltklikker du på layeret den ligger i og velger opacity til sånn du vil ha det, ca 50-60% tipper jeg. Så trykker du på duplicate current frame i animation tabben og stiller opacity litt høyere, så gjentar du det til du er på 100%. Så stiller du på hvor lenge hvert bilde skal vare osv, og vips du er ferdig :thumbup:

Endret av Met_Fredrik
Lenke til kommentar
Kannutt

Kannutt

Skrevet
Skrevet
Unnskyld at jeg spør om dette i denne posten, men... Er det noen her som har en enkel forklaring for hvordan man lager en animasjon i photoshop?

 

Vet at dette ikke er det rette stedet å spørre da ;)

6567551[/snapback]

 

Image ready er fint for dette, følger ikke det med photoshop? Jeg har det ihvertfall :tease:

 

Men ihvertfall, om du har image ready, så kan du åpne en gif animasjon i programmet, så ser du veldig fort hvordan du gjør det :)

 

Det du gjør, er å finne fram bildet, så dobbeltklikker du på layeret den ligger i og velger opacity til sånn du vil ha det, ca 50-60% tipper jeg. Så trykker du på duplicate current frame i animation tabben og stiller opacity litt høyere, så gjentar du det til du er på 100%. Så stiller du på hvor lenge hvert bilde skal vare osv, og vips du er ferdig :thumbup:

6567568[/snapback]

 

 

Å fade en gif mot eller fra transperent blir som regel ganske dårlig på nett. Jeg ville heller ha latt bilde bli mindre og mindre. Det gir et mye bedre resultat på nett. Enkelt i PS. Velg duplicate layer fra utganspunktet.

Deretter velger du Transform/Scale i Edit-menyen. Ta tak i hjørnet på bildet, hold nede "Shift/Alt", og scaler bildet ned. Deretter duplicate igjen, osv.....

Når du har laget endel layers med ulik størrelse, velg animasjon i window menyen. Slå av synligheten på alle lag med unntak av det størte bildet. Velg duplicat selected frame i animasjonsmenyen. I denne rammen velger du kun det neste største laget synlig. Slik gjenntar du til alle lagene ligger i hver sin animasjonsramme. Velg Save for web i file-menyen, og vips så har du laget din aller-aller første animasjon! :)

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...