Utheve bildet når musen er over bildet

[Frigg33]

Hvordan kan jeg få til slik at bildet blir uthevet når jeg fører musen over det? Ikke sånn at det plutselig skifter til et større bilde, men den glir liksom fint ut mot meg.

 

Mvh Per

[Runar]

Jeg tror du må utdype "glir fint ut mot meg" hvis du vil ha noen svar. Dette virker som noe du må bruke Javascript for å få til.

[Frigg33]

jeg har noen små miniatyr bilder på en rekke, de er 80x80 og når jeg fører musen over så vil jeg at de skal komme litt imot meg, hvis du skjønner.

[Runar]

Da er jeg rimelig sikker på at du enten må bruke Flash eller Javascript

[Vindstille]

jeg har noen små miniatyr bilder på en rekke, de er 80x80 og når jeg fører musen over så vil jeg at de skal komme litt imot meg, hvis du skjønner.

8592729[/snapback]

Og du vil at overgangen skal være myk? I så fall må du bruk javascript.

Vis ikke trenger du bare å brukte CSS (selv om det ikke funker i IE)

 

img.classname:hover {

width:90;

height:90;}

 

NB: Bildene vil bli litt kornete vis du ikke har bildene i 90x90 i dette eksempelet her. Kan selfølgelig justeres etter egne ønsker.

[haugsand]

Denne koden vil muligens også gi den visuelle effekten du vil oppnå:

 

img.:hover {
 position: relative;
 top: 1px;
 left: 1px;
}

Endret 11. mai 2007 av haugsand

[Runar]

Trådstarter skriver i første posten at han vil at bildene skal "gli" mot han, så forslagene deres er nok ikke det han i utgangspunktet var ute etter.

[Frigg33]

ja de skal på en måte ikke sprette ut i full fart, men gli. Men jeg skal prøve forslagene deres og se hva om det funker

 

Takk for alle svar =)

[Svinat]

Du tenker kanskje på Lightbox?

[The_Lozer]

Du tenker kanskje på Lightbox?

8593343[/snapback]

takk, jeg har letet etter det lenge

[Frigg33]

ikke akkurat det, men når jeg tenker meg om så hadde det vært jævla stillig

[Vindstille]

ikke akkurat det, men når jeg tenker meg om så hadde det vært jævla stillig

8599363[/snapback]

Det er kanskje stilig. Men det er jævla upraktisk. Selv om jeg vet noen liker det setter i hvert fall jeg null pris på det.

[Frigg33]

jeg skjønner.. jeg hadde syntes det samme hvis ikke den bla funksjonen var der.. sånn at du slipper å gå ut av hvert bilde for å se et nytt...

 

Men jeg har nytt spørsmål til folkene.. Når jeg trykker på et bilde på siden min som er en link, så kommer det en helsikens irritrende prikkete kant rundt hele bilde.. Hvordan får jeg vekke denne?

[Runar]

a { outline: none; }

 

Endret 13. mai 2007 av Runar

[Frigg33]

hvor skal jeg putte den inn?.. i css filen?

Endret 13. mai 2007 av suppesaft

[The_Lozer]

hvor skal jeg putte den inn?.. i css filen?

8600769[/snapback]

tipper den skal i css filen

[Frigg33]

Den prikkete kanten kommer enda:(

[Frigg33]

det er det samme som skjer når vi trykker på "hurtigsvar" knappen, bare sånn at dere er sikker på hva jeg mener

[Runar]

Vis oss resten av CSS-filen din. Hvis den er lang, så putter du den i [.spoiler] tags.

[Frigg33]

css

 

Klikk for å se/fjerne innholdet nedenfor

@charset "utf-8";

/* CSS Document */

 

 

/* --------------------------LIGHTBOX----------------------------------- */

 

#lightbox{

position: absolute;

left: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

 

#lightbox a img{ border: none; }

 

#outerImageContainer{

position: relative;

background-color: #fff;

width: 250px;

height: 250px;

margin: 0 auto;

}

 

#imageContainer{

padding: 10px;

}

 

#loading{

position: absolute;

top: 40%;

left: 0%;

height: 25%;

width: 100%;

text-align: center;

line-height: 0;

}

#hoverNav{

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

z-index: 10;

}

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}

 

#prevLink, #nextLink{

width: 49%;

height: 100%;

background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

display: block;

}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

 

 

#imageDataContainer{

font: 10px Verdana, Helvetica, sans-serif;

background-color: #fff;

margin: 0 auto;

line-height: 1.4em;

overflow: auto;

width: 100%

}

 

#imageData{ padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

#imageData #caption{ font-weight: bold; }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

 

#overlay{

position: absolute;

top: 0;

left: 0;

z-index: 90;

width: 100%;

height: 500px;

background-color: #000;

}

 

/* --------------------------LIGHTBOX----------------------------------- */

 

 

 

 

 

 

 

body {

background-color: #000000;

}

 

.style1, .style1 a:link, .style1 a:visited, .style1 a:active {

color: #FFFFFF;

text-align: center;

font-family: Arial, Helvetica, sans-serif ;

 

 

}

 

 

.footer {

color: #CCCCCC;

text-align:center;

 

}

 

.style2 {

background-color: #242325;

outline:none;

 

}

 

Har akkurat begynt på siden og foreløpelig ser den sånn ut, lightbox'en er også med

 

 

EDIT: Det funker i IE men ikke i Firefox.. hvordan fikser jeg det?

Endret 13. mai 2007 av suppesaft