Tarttisin jelppiä

Tämä koodi tekee niin, että kun vie hiiren kuvan päälle se näyttää sen isompana siinä vieressä. Ja aina samassa paikassa. Nyt haluaisin tehä niin, että thumbia pitäs painaa että sais ison kuvan näkyviin. Se on luultavasti joku OnClick mutta en tiiä mihin se pitäs laittaa. Sitten pitäs saaja niin, että se iso kuva tulee aina sen pienen kuvan viereen mitä painaa.

Tässä css:



.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}




Ja tässä html:




Simply beautiful.

So real, it's unreal. Or is it?



Sushi for dinner anyone?

Run wild with horses.
2389
Äänestä

Muut lukivat myös

Vastaukset 2

Vanhimmat

Kommentoi aloitusta


lanttu123 kirjoitti:

Tämä koodi tekee niin, että kun vie hiiren kuvan päälle se näyttää sen isompana siinä vieressä. Ja aina samassa paikassa. Nyt haluaisin tehä niin, että thumbia pitäs painaa että sais ison kuvan näkyviin. Se on luultavasti joku OnClick mutta en tiiä mihin se pitäs laittaa. Sitten pitäs saaja niin, että se iso kuva tulee aina sen pienen kuvan viereen mitä painaa.

Tässä css:



.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}




Ja tässä html:




Simply beautiful.

So real, it's unreal. Or is it?



Sushi for dinner anyone?

Run wild with horses.

Anonyymi
5000

Ilmoita asiaton sisältö

  • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

  • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

  • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

  • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

  • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

  • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

Jaa keskustelu