Link effekt variációk képekre

 

Ezen az oldalon bemutatok néhány link effektet,mely képeken használatosak,mellékelve az adott demót,valamint annak CCS-kódját is.A demók kipróbálásához vidd a kurzort a képre !

Az első effekt a kép körül lévő ún.border szélességét változtatja meg.

Ennek CSS-kódja a következő :

 

<STYLE type=text/css>
<!--
a:link img, a:visited img {
border: 1px solid orange;
}

a:hover img {
border: 3px solid orange;
}
-->
</STYLE>

A következő kód a border színét változtatja meg.Íme :

Kódja:

 

<STYLE type=text/css>
<!--
a:link img, a:visited img {
border: 2px solid navy
}

a:hover img {
border: 2px solid tomato
}
-->
</STYLE>

A következő CSS-kód a border stílusát változtatja meg.Íme egy mutatós variáció :

 

 

Kódja:

 

<STYLE type=text/css>
<!--
a:link img, a:visited img {
border: 1px solid red
}

a:hover img {
border: 1px dashed red
}
-->
</STYLE>

A következő kód "eltávolítja " az adott kép borderét.

 

Kódja:

 

 

<STYLE type=text/css>
<!--
a:link img, a:visited img {
border: 2px solid tomato
}

a:hover img {
border: 0px
}
-->
</STYLE>

 

A következő kód az előző ellentéte,bordert tesz a belinkelt kép köré.

 

 

Kódja:

 

<STYLE type=text/css>
<!--
a:link img {
border: 0px
}

a:hover img {
border: 2px dotted darkkhaki
}
-->
</STYLE>

 

A következő effektben a kép háttérszínt kap :

 

 

 

     

Vissza