cambiare colore a bordo immagine

[gaullo]

ciao
ho creato un foglio d stile che mi colora un bordo intorno a delle immagini.

ora mi piacerebbe aggiungere anche il cambio di questo colore quando l'utente ci passa sopra con il mouse.

#image {
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
}

Faccio già una cosa simile per i link, ma non ho riesco a farlo per l'image.
qualche suggerimento?

grazie in anticipo, ciao

[Scorpion69]

Puoi usare la pseudo-classe hover, solo che funziona solo con Firefox che supporta questo elemento anche se non sono link...

[gaullo]

purtroppo mi serve qualcosa di funzionante almeno su ie.
in effetti tali immagini linkano alle loro corrispettive immagini a 800x600, e sono quindi contenute dentro ad un link.
mi hanno parlato dell'evento "on mouse move".
ma mi trovo in difficoltà ad usarlo.
qualcuno lo ha mai usato, o conosce altri metodi?

[Scorpion69]

Originariamente inviato da gaullo
purtroppo mi serve qualcosa di funzionante almeno su ie.
in effetti tali immagini linkano alle loro corrispettive immagini a 800x600, e sono quindi contenute dentro ad un link.
mi hanno parlato dell'evento "on mouse move".
ma mi trovo in difficoltà ad usarlo.
qualcuno lo ha mai usato, o conosce altri metodi?

Se le immagini sono dei link allora non hai problemi!

[gaullo]

#image a {
color:#666;
}

#image a:hover {
color:#CCC;
}

su firefox no prob.
Ma su ie assolutamente non va.

mi visualizza i colori di default blu e viola.
e vi posso assicurare che sono veramente brutti.
purtroppo non posso trascurare propio gli utenti di ie....quindi devo trovare una soluzione.

[Scorpion69]

.img {
    color: #FFFFFF;
}

.img a {
    color: #FFFFFF;
}

.img a:hover {
    color: #FF0000;
}

Sicuro che non va?

Nell'HTML hai messo giusto?

[img]img.gif[/img]

[LA VALE]

Strano, perchè il codice dovrebbe andare....

Giusto come prova, prova a togliere l'id all'immagine..Solo per provare se funziona...

Poi prova a postarci il codice html..

[gaullo]

ok, allora...
la pagina incriminata è www.proclesis.it/agriturismo/foto.htm

il codice css usato è:

.img {
color: #666;
}

.img a {
color: #666;
}

.img a:hover {
color: #CCC;
}

l'effetto funziona su firefox quando applico lo stile alla cella che contiene l'immagine.
su ie si vede il colore del bordo cambiato quando applico lo stile all'immagine.

[pierofix]

Si potrebbe anche usare un connubio tra CSS e Javascript. Ad esempio:

XHTML

[img]img.png[/img]


CSS

.album
{
   border:3px solid #000;
}
.album:hover,
.album_hover
{
   border-color:#CCC;
}


Javascript

window.onload = function()
{
   var imgs = document.getElementsByTagName('img')
   var imgs_album = new Array()
   for (var i = 0; i < imgs.length; i++)
   {
      if ( imgs.item(i).className == 'album' )
      {
         imgs_album.push(imgs.item(i))
      }
   }

   for (var i = 0; i < imgs_album.length; i++)
   {
      imgs_album[i].onmouseover = function()
      {
         this.className = 'album_hover'
      }
      imgs_album[i].onmouseout = function()
      {
         this.className = ''
      }
   }
}

Il file javascript io lo servirei solo ed esclusivamente ad IE:

<!--[if IE]>
<script type="text/javascript" src="filejs.js"></script>
<![endif]-->

[gaullo]

anche questa è una via, ma preferirei non utilizzare javascript...
sopratutto per una stupidata del genere.....
vi ho linkato la pagina, xchè di sicuro è una stupidata...che non riesco però ad individuare