Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    showDiv / hideDiv con link-immagine

    Ciao a tutti!

    Sono nuova di questo forum...ho un "piccolo" problema con javascript. Premetto che ne so poco di javascript...

    Devo creare una pagina con div sovrapposti che appaiano e scompaiano cliccando sui relativi link-immagine con effetto rollover. Ovviamente il tutto funziona con Firefox ma non con IE ed Opera.

    E' un po' che ci sto sopra ma non trovo la soluzione!

    Ho fatto una pagina di prova sia con link-immagine che con semplici link di testo. Con questi ultimi lo script funziona su ogni browser. Purtroppo a me servono i link-immagine!

    Qualcuno mi può aiutare per favore??!

    Grazie!

    Qui di seguito vi inserisco il codice della pagina di prova.


    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function showDiv(divid){
    document.getElementById(divid).style.display = 'block';
    }
    function hideDiv(divid){
    document.getElementById(divid).style.display = 'none';
    }
    </script>
    </head>
    <body>
    <table title="Menu di navigazione progetti">
    <tr>
    <td>
    andromeda
    </td>
    <td>
    padova
    </td>
    <tr />
    <tr>
    <td>
    [img]../img/photo_gallery/gambato_icoOFF.jpg[/img]
    </td>
    <td>
    [img]../img/photo_gallery/gwangiu_icoOFF.jpg[/img]
    </td>
    <tr />
    </table>


    <div id="andromeda" style="display: block">
    [img]../img/photo_gallery/andromeda.gif[/img]
    </div>
    <div id="auditoriumPD" style="display: none">
    [img]../img/photo_gallery/auditorium_padova.gif[/img]
    </div>
    <div id="gambato" style="display: none">
    [img]../img/photo_gallery/gambato.gif[/img]
    </div>
    <div id="gwangiu" style="display: none">
    [img]../img/photo_gallery/gwangiu.jpg[/img]
    </div>

    </body>
    </html>

  2. #2
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    queste 2 funzioni usate nel codice
    MM_swapImage();
    MM_swapImgRestore();
    non sono definite nella pagina

    sono i rollover di dreamweaver, prendi lo script relativo dal codice di una pagina (fatta con DW) in cui fai uso del rollover e ricopialo nella tua

  3. #3
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    se non vado errato questo e' quello che manca
    codice:
    function MM_swapImgRestore() { //v3.0 
    	var i,x,a=document.MM_sr; 
    	for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
    } 
    
    function MM_preloadImages() { //v3.0 
    	var d=document; 
    	if(d.images){ 
    		if(!d.MM_p) d.MM_p=new Array(); 
    		var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
    		for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ 
    			d.MM_p[j]=new Image; 
    			d.MM_p[j++].src=a[i];
    		}
    	}
    } 
    
    function MM_findObj(n, d) { //v3.0 
    	var p,i,x; 
    	if(!d) d=document; 
    	if((p=n.indexOf("?"))>0&&parent.frames.length){
    		d=parent.frames[n.substring(p+1)].document; 
    		n=n.substring(0,p);
    	} 
    	if(!(x=d[n])&&d.all) x=d.all[n]; 
    	for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    	for(i=0;!x&&d.layers&&i<d.layers.length;i++) 
    	x=MM_findObj(n,d.layers[i].document);
    	return x;
    } 
    
    function MM_swapImage() { //v3.0 
    	var i,j=0,x,a=MM_swapImage.arguments; 
    	document.MM_sr=new Array;
    	for(i=0;i<(a.length-2);i+=3){
    		if ((x=MM_findObj(a[i]))!=null){
    			document.MM_sr[j++]=x; 
    			if(!x.oSrc) x.oSrc=x.src; 
    			x.src=a[i+2];
    		}
    	}
    }

  4. #4
    Grazie Xinod per la tua celere risposta al mio problema.

    Ho provato a fare come mi hai detto ma non cambia niente.

    Quindi ho provato a togliere i rollover sui link immagine per focalizzare meglio il problema...che permane!

    Altri suggerimenti?

    Riscrivo qui sotto il codice senza i rollover:

    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function showDiv(divid){
    document.getElementById(divid).style.display = 'block';
    }
    function hideDiv(divid){
    document.getElementById(divid).style.display = 'none';
    }
    </script>


    </head>
    <body>
    <table title="Menu di navigazione progetti" class="menu-progetti">
    <tr>
    <td>
    andromeda
    </td>
    <td>
    padova
    </td>
    <tr />
    <tr>
    <td>
    [img]../img/photo_gallery/gambato_icoOFF.jpg[/img]
    </td>
    <td>
    [img]../img/photo_gallery/gwangiu_icoOFF.jpg[/img]
    </td>
    <tr />
    </table>


    <div id="andromeda" style="display: block">
    [img]../img/photo_gallery/andromeda.gif[/img]
    </div>
    <div id="auditoriumPD" style="display: none">
    [img]../img/photo_gallery/auditorium_padova.gif[/img]
    </div>
    <div id="gambato" style="display: none">
    [img]../img/photo_gallery/gambato.gif[/img]
    </div>
    <div id="gwangiu" style="display: none">
    [img]../img/photo_gallery/gwangiu.jpg[/img]
    </div>

    </body>
    </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.