Mouseover img

[Manuelandro]

Ciao ragazzi. uso questo scriptino

<script type="text/javascript">
function init() {
  if (!document.getElementById) return
  var imgOriginSrc;
  var imgTemp = new Array();
  var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('hsrc')) {
        imgTemp[i] = new Image();
        imgTemp[i].src = imgarr[i].getAttribute('hsrc');
        imgarr[i].onmouseover = function() {
            imgOriginSrc = this.getAttribute('src');
            this.setAttribute('src',this.getAttribute('hsrc'))
        }
        imgarr[i].onmouseout = function() {
            this.setAttribute('src',imgOriginSrc)
        }
    }
  }
}
onload=init;

</script> 

che richiamo con [img][/img] per cambiare l'immagine al mouseoiver.
solo che mi capita che qualche volta, con questa funzione, le immagini orginiali(e nn over) nn si caricano.
Ho provato usando preloadimgs ma mi succede lo stesso. come evito questo problema? fatemi sapere.ciaoo

preload

<script type="text/javascript">
//precaricamento imgs
var myimages=new Array()

function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
        myimages[i] = new Image();
        myimages[i].src = preloadimages.arguments[i];
    }
}

preloadimages('http://www.esempio.com/immagini/immagine.jpg');
</script> 

[Manuelandro]

up

[Mega69]

Onestamente non ho mai sentito nominare l'attributo hsrc
Per fare i rollover è meglio se usi un tag a senza attributo href, al quale usi :hover per cambiare immagine ( o meglio, per cambiare la posizione dello sfondo )

[Manuelandro]

questo è quello che uso io

http://javascript.html.it/demo/javas...86/esempio.htm

[andbin]

Sconsiglio vivamente di usare degli attributi "personalizzati" per un motivo molto semplice: se si passa il documento HTML al validatore del W3C, non te lo valida, ovviamente, nemmeno se ti metti a pregare in giapponese.

Una soluzione che ho studiato è la seguente:

function RolloverItem (img_id, src_normal, src_over)
{
    this.img_id = img_id;
    this.img_normal = new Image ();
    this.img_normal.src = src_normal;
    this.img_over = new Image ();
    this.img_over.src = src_over;
}

function Rollover ()
{
    this.items = new Array ();
    Rollover.prototype.add = function (img_id, src_normal, src_over)
    {
        this.items[this.items.length] = new RolloverItem (img_id, src_normal, src_over);
    }
    Rollover.prototype.setup = function ()
    {
        for (var i = 0; i < this.items.length; i++)
        {
            if (document.getElementById)
                obj = document.getElementById (this.items[i].img_id);
            else
                return;

            obj.img_normal = this.items[i].img_normal;
            obj.img_over = this.items[i].img_over;
            obj.onmouseover = new Function ('this.src = this.img_over.src');
            obj.onmouseout = new Function ('this.src = this.img_normal.src');
        }
    }
}

Questo codice sopra potrebbe stare in un file .js separato, ad esempio.

Poi, dove serve fare il rollover:

var rollover = new Rollover ();
rollover.add ('img1', 'normale1.gif', 'over1.gif');
rollover.add ('img2', 'normale2.gif', 'over2.gif');
....

Poi all'evento onload del body si mette: rollover.setup()

[Mega69]

Ormai non è così che si fanno i rollover.

Al posto di utilizzarre due immagini ne utilizzi una, che contiene sopra l'immagine normale, sotto quella che compare ad hover ( o viceversa )

Dopodichè questo lo metti nel codice html

e questo nel css

.myRollover { background-image:url(myImage.jpg); background-position:top; }
.myRollover:hover { background-position:bottom; }

In pratica javascript non lo usi proprio