Dreamweaver: mappe, rollover disgiunti.

Di: yan | 26/09/2020 18:33:05
Ho un’immagine della cartina dell’italia ed ho bisogno di selezionare una parte dell’immagine, nel caso specifico le varie regioni e, passandovi sopra, oltre ad apparire la manina e l’effetto link che si ottiene selezionando la “zona attiva” dell’immagine, dovrei far vedere il nome della regione selezionata!
Come posso visualizzare tali nomi in una zona particolare dello schermo chessò a sinistra della cartina, solo passando il puntatore sopra le determinate regioni? Pensavo di seguire l’esempio di carletto:
http://www.001design.it/forum_italiano/thread.php?id=115
Utilizzando i livelli, per poi renderli visibili o meno sulle selezioni attive, ma ho notato che la cosa funziona per l’immagine della cartina dell’italia, e su una selezione, ma non su ogni selezione di ogni regione... per quelle posso attivare link differenti ma non visualizzare il livello corrispondente il nome della regione!
C’è qualche modo per realizzare una cosa del genere?
So che è possibile alla selezione attiva (di ogni regione) quando gli passo su col puntatore la comparsa di un testo semplice col nome della regione... non so come si chiami...

Risposte


soluzione DHTML

Ho risolto il problema, condivido con voi la soluzione.
Ho dovuto scomodare il DHTML, non so se vi sia un modo più semplice per realizzarla, se qualcuno conosce un metodo più semplice e ben accetto il suo intervento.
Ecco il codice, se avete bisogno di chiarimenti chiedete pure, per quello che posso risponderò:
<!-- commento inserito per non interferire con il codice del forum.
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #1b1464;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script>
//You have to set some variables here:
//Set the font for the msg
msgFont='Georgia,New times roman'
//Set the fontSize in px
msgFontSize=30
//Set the fontColor
msgFontColor="yellow"
/********************************************************************************
Here's the array that holds the text to change the divmessage to
when you mouseover. Change the text here
********************************************************************************/
messages=new Array(6)
messages[0]="Valle d,Aosta"
messages[1]="Piemonte"
messages[2]="Lombardia"
messages[3]="Trentino Alto Adige"
messages[4]="Veneto"
messages[5]="Friuli Venezia Giulia"
messages[6]=""
/********************************************************************************
You don't have to change anything below this
********************************************************************************/
//Browsercheck:
ie=document.all?1:0
n=document.layers?1:0
/********************************************************************************
Constructing the ChangeText object
********************************************************************************/
function makeChangeTextObj(obj){
this.writeref=(n) ? eval('document.'+obj+'.document'):eval(obj);
this.writeIt=b_writeIt;
}
function b_writeIt(text){
if(n){
this.writeref.write(text)
this.writeref.close()
}
if(ie)this.writeref.innerHTML=text
}
/********************************************************************************
The function that calls objects write function with the corect font size
and such onmouseover and mouseout.
********************************************************************************/
function changeText(num){
if(ie || n) oMessage.writeIt('<span style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">'+messages[num]+'</span>')
}
/********************************************************************************
This calls the object constructor
********************************************************************************/
function changeTextInit(){
if(ie || n) oMessage=new makeChangeTextObj('divMessage')
}
//Calls the init function on pageload
onload=changeTextInit
</script>
</head>
<body>
<div align="center">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1;
left: 101px; top: 171px;"><img src="TUA_IMMAGINE.gif" width="269" height="288" border="0" usemap="#Map">
<map name="Map"><area shape="poly" coords="14,47,22,45,29,46,32,53,24,55,19,56,13,54" <a href="#" onmouseover="changeText(0)" onMouseout="changeText(6,0)" /a>
<area shape="poly" coords="21,59,28,58,33,55,32,49,36,44,39,38,41,48,40,55,40,63,40,67,44,71,50,71,47,78, 39,80,35,86,33,91,29,87,24,89,17,84,20,74,14,69" a href="#" onmouseover="changeText(1)" onmouseout="changeText(6,1)" /a>
</map></div>
</div><b><i><div id="divMessage" style="position:absolute; left:136px; top:512px; height: 40px;"></i></b></div>
</body>
</html>
Fine commento per non interferire con il codice del forum di 001design.it. -->
P.S. Condividi la conoscenza, la conoscenza è vita...
Se qualcuno avesse bisogno di consigli su Photoshop, io lo uso e faccio grafica da anni, certo non so tutto ma per quel che posso... Beh ciao

Di: yan | 26/09/2020 18:33:05


Ciao, sicuramente una soluzione al problema è quella di usare i rollover disgiunti di Fireworks.
Marta sicuramente sa come realizzarli: http://www.001design.it/forum_italiano/thread.php?id=277
Tuttavia sicuramente si trovano guide in proposito ai rollover disgiunti di Fireworks.
Un’altra possibile soluzione (secondo me più scomoda) potrebbe essere l’utilizzo di rollover o scambia immagine al passaggio del mouse sulle aree attive appositamente sagomate per i contorni delle varie regioni, da Dreamweaver o da Fireworks. O addirittura vedere cosa si può fare giocando con la visibilità dei livelli, ma sempre on mouseOver.
Altri contributi sono come sempre ben accetti, ciao a tutti.

Di: Pablito | 26/09/2020 18:34:05


Con Fireworks avevo sentito anche io che si poteva realizzare la cosa, ma volevo farla direttamente con Dreamweaver, per non installare un programma che poi non sfrutterei...
Con i livelli giocando sulla visibilità si hanno limitazioni purtroppo, nel senso che la cosa può essere applicata su una immagine, cioè un solo effetto on mouseover per ogni immagine, purtroppo non è fattibile sulle diverse selezioni attive che posso prendere in una singola immagine!
Sulle aree attive di una stessa immagine posso linkare pagine differenti, ma non posso dare proprietà di on Mouseover... Era venuta in mente anche a me, ma purtroppo non sono riuscito a cavarne un ragno da un buco!
Comunque si accettano ulteriori suggerimenti da chi ne abbia, ciao.

Di: yan | 26/09/2020 18:34:05