Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2006
    Messaggi
    51

    come fare?

    Ciao a tutti, vorrei sottoporvi questo quesito: Sto sviluppando una pagina web con la piantina dell'italia suddivisa per regioni. Ho creato delle aree poligonali così che passando sulla regione sia possibile accedere alla pagina specifica. Vorrei fare in modo che al passaggio del mouse si caricasse un livello con un'immagine colorata della regione in modo da dare un'effetto di passaggio del mouse. Non so se sono stato chiaro e per darvi un'idea di quello che vorrei realizzare io ho preso l'idea dal sito di mediaworld: clicca qui.
    Passando su una regione questa diventa rossa. Come si realizza una cosa del genere? :master:

  2. #2
    css pseudoclassi dinamiche :hover etc..




  3. #3
    Ecco quello che fa:

    Nell'immagine mappata (poligonale):

    codice:
    <area shape="poly" coords="85,87,93,90,103,96,112,97,132,95,133,98,133,105,145,110,142,118,143,122,139,130,137,135,135,140,130,146,123,152,103,131,98,108" href="/dove/toscana.html" onMouseOver="setBody('nomeregione','TOSCANA'); changeImage('italiaimg',toscana.src);"    onMouseOut="setBody('nomeregione',''); changeImage('italiaimg',italiaoff.src);">

    E queste le due funzioni:

    codice:
    function setBody(obj,body) {
    
      if (is == null) return true;
    
      if (is.ns4) {
        this.layer = window.document[obj];
        for(var i = 0; i < body.length; i++) {
          this.layer.document.writeln(body[i]);
        }
        this.layer.document.close();
      }
    
      if (is.ie4) {
        this.element = window.document.all[obj];
        this.element.innerHTML = body;
      }
    
      if (is.ie5 || is.ns6) {
        this.element = document.getElementById(obj);
        this.element.innerHTML = body;
      }
    
      return true;
    }
    
    function changeImage(imgName,imgObj) {
      if (is == null) return true;
    
      if (is.ns4) {
        eval('this.document.' + imgName + '.src = "' + imgObj + '"');
      }
    
      if (is.ie4) {
        document.images[imgName].src = imgObj;
      }
    
      if (is.ie5 || is.ns6) {
        document.images[imgName].src = imgObj;
      }
    
      return true;
    }
    L'effetto comunque si chiama rollover e per realizzarlo devi avere per ogni regione ue immagini specifiche, in modo da eseguire l'effetto colorazione!
    Provare paura per un qualcosa che ti possa capitare nel futuro non ti evita quell'evento,ti fa soltanto vivere un presente sbagliato!

  4. #4
    ma conviene farlo con javascript?..partendo dal presupposto che sia un menu (immagino) chi dovesse avere javascript disabilitato non riuscirebbe ad accedervi...



  5. #5
    Io ti ho postato quello che è il sorgente della pagina e gli script utilizzati.
    Provare paura per un qualcosa che ti possa capitare nel futuro non ti evita quell'evento,ti fa soltanto vivere un presente sbagliato!

  6. #6
    Utente di HTML.it
    Registrato dal
    Mar 2006
    Messaggi
    51
    Originariamente inviato da maximum
    Ecco quello che fa:

    Nell'immagine mappata (poligonale):

    codice:
    <area shape="poly" coords="85,87,93,90,103,96,112,97,132,95,133,98,133,105,145,110,142,118,143,122,139,130,137,135,135,140,130,146,123,152,103,131,98,108" href="/dove/toscana.html" onMouseOver="setBody('nomeregione','TOSCANA'); changeImage('italiaimg',toscana.src);"    onMouseOut="setBody('nomeregione',''); changeImage('italiaimg',italiaoff.src);">

    E queste le due funzioni:

    codice:
    function setBody(obj,body) {
    
      if (is == null) return true;
    
      if (is.ns4) {
        this.layer = window.document[obj];
        for(var i = 0; i < body.length; i++) {
          this.layer.document.writeln(body[i]);
        }
        this.layer.document.close();
      }
    
      if (is.ie4) {
        this.element = window.document.all[obj];
        this.element.innerHTML = body;
      }
    
      if (is.ie5 || is.ns6) {
        this.element = document.getElementById(obj);
        this.element.innerHTML = body;
      }
    
      return true;
    }
    
    function changeImage(imgName,imgObj) {
      if (is == null) return true;
    
      if (is.ns4) {
        eval('this.document.' + imgName + '.src = "' + imgObj + '"');
      }
    
      if (is.ie4) {
        document.images[imgName].src = imgObj;
      }
    
      if (is.ie5 || is.ns6) {
        document.images[imgName].src = imgObj;
      }
    
      return true;
    }
    L'effetto comunque si chiama rollover e per realizzarlo devi avere per ogni regione ue immagini specifiche, in modo da eseguire l'effetto colorazione!
    Se ho capito le due funzioni che cambiamo l'immagine sono contenute all'interno di una scritp java scripter.js mentre all'interno del codice della pagina dove si crea l'area poligonale c'è la chiamata allo script che cambia la pagina. C'è anche una dichiarazione prima:

    <SCRIPT type=text/javascript>

    italiaoff=new Image();
    italiaoff.src='/dove/img/italia/italiaoff.gif';
    abruzzo=new Image();
    abruzzo.src='/dove/img/italia/abruzzo.gif';
    calabria=new Image();
    calabria.src='/dove/img/italia/calabria.gif';
    emilia=new Image();
    emilia.src='/dove/img/italia/emilia.gif';
    friuli=new Image();
    friuli.src='/dove/img/italia/friuli.gif';
    lazio=new Image();
    lazio.src='/dove/img/italia/lazio.gif';
    liguria=new Image();
    liguria.src='/dove/img/italia/liguria.gif';
    lombardia=new Image();
    lombardia.src='/dove/img/italia/lombardia.gif';
    marche=new Image();
    marche.src='/dove/img/italia/marche.gif';
    piemonte=new Image();
    piemonte.src='/dove/img/italia/piemonte.gif';
    puglia=new Image();
    puglia.src='/dove/img/italia/puglia.gif';
    sardegna=new Image();
    sardegna.src='/dove/img/italia/sardegna.gif';
    sicilia=new Image();
    sicilia.src='/dove/img/italia/sicilia.gif';
    toscana=new Image();
    toscana.src='/dove/img/italia/toscana.gif';
    umbria=new Image();
    umbria.src='/dove/img/italia/umbria.gif';
    veneto=new Image();
    veneto.src='/dove/img/italia/veneto.gif';

    </SCRIPT>

    Il problema è che non succede nulla ( premetto che ho creato tutte le immagini richiamate nello script sopra ). Cosa mi manca??

  7. #7
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Ciao
    la prossima volta usa un titolo significatico e a norma di regolamento

    http://forum.html.it/forum/showthrea...hreadid=310046
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  8. #8
    Utente di HTML.it
    Registrato dal
    Mar 2006
    Messaggi
    51
    Scusate ma non sapevo come spiegarmi un due parole...
    Non si ripeterà

  9. #9
    Utente di HTML.it
    Registrato dal
    Mar 2006
    Messaggi
    51

    Si vede che sono all'inizio...

    Ho trovato l'errore e adesso tutto funziona. Grazie a tutti.

  10. #10
    Provare paura per un qualcosa che ti possa capitare nel futuro non ti evita quell'evento,ti fa soltanto vivere un presente sbagliato!

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 © 2025 vBulletin Solutions, Inc. All rights reserved.