Bottoni in script nel Menù che aprono Pagine Web (iperlink).

Printable View

27-01-2004, 11.59.55

Buongiorno, ho bisogno di 1 consiglio.
Ho creato 1 Home Page con 2 Frames Verticali ( 1 frame "menù" e 1 frame "principale").
Nel frame "menù" ho le varie scritte su cui cliccando faccio comparire le relative Pagine Web richieste all'interno del frame "principale".
Ora però vorrei migliorare la grafica del menù, e passare da delle semplici scritte che sono iperlink a dei bottoni colorati a 2 colori (onmouseout e onmouseover, ossia cambiano colore al passaggio del mouse) contenenti le varie scritte del menù (esempio: home, contattati, chi siamo, etc.etc.), cliccando sui quali compare all'interno del frame "principale la relativa Pagina Web.

Sul Web ho trovato il seguente codice per realizzare i pulsanti web come voglio io, ma, pur introducendo le relative modifiche del caso, non riesco a farli diventare degli iperlink (in pratica come faccio faccio, non riesco a far comparire le pagine web nel frame "principale).
Codice:
--------------------------------------------------------------------------------
<input type="button"
style="font-size:20px;border:0px;width:100px;height:50px;backg round:url(blue2.jpg);"
value="Apre finestra"
onmouseover="style.background='url(blue1.jpg)';"
onmouseout="style.background='url(blue2.jpg)';
onclick="nuova=window.open('lezionecss.html','nuov a','toolbar=no,location=no,
directories=no,status=no,scollbar=no,resizable=no, width=400,height=400')"
>

--------------------------------------------------------------------------

Ho provato a fare molti tentativi prima di decidermi a chiedere aiuto su questo Forum, perchè non mi piace scocciare le persone quando ce la posso fare da solo (non in questo caso).

Chi mi dà 1 mano?
Come devo completare lo script?

In alternativa potrei inserire dei bottoni-immagini con effetto roll-over ma voglio provare a fare 1 cosa nuova (non si finisce mai di imparare).
Grazie a chi mi saprà dare 1 mano.
Antonio
27-01-2004, 12.47.51
gve

Io farei diversamente, usando direttamente solo i css senza javascript ...

In pratica, i link li lasci come li hai fatti inserendoli in dei div, così:

<div class="linked"><a href="..." target="...">link</a></div>

Quindi, all'inizio del file, all'interno di <head>, metti:

<style type="text/css"></style>

Prova e dimmi se ti piace ... :wink:
27-01-2004, 15.56.34

Ciao gve :) , grazie prima di tutto per la tua risposta veloce.
Ho seguito il tuo consiglio e ho fatto 1 Test.

Purtroppo il risultato è il seguente:
-) i link funzionano bene; :wink:
-) i bottoni no. :?
Infatti i bottoni vengono messi come sfondo alla pagina (frame) "menù" e non cambiano colore al passaggio del mouse.
(sempre se non ho commesso qualche errore, se vuoi ti posto in PM tutto l'HTML generato).

Io cercavo 1 effetto diverso.

Invece di creare con Image Ready dei Bottoni con l'effetto RollOver a 2 colori ( OnMouseOut = colore n°1, OnMouseOver = colore n°2) a cui attribuire la funzione di lik ipertestuale ( e qundi tanti Bottoni con scritte diverse per altrettanti link che avrebbero dovuto aprire), volevo creare i miei Bottoni con 1 semplice (si fà per dire...) script, così da far caricare al Browser solo 2 file xxx.gif (blu1.gif & blu2.gif) e solamente le scritte cambiavano di volta in volta....
Lo sò che non é facile ma volevo inserire 1 miglioria grafica senza ricorrere a Image Ready (e risparmiare anche un pò di lavoro... :wink: ).

Chi sà come trovare la soluzione? :idea:
Grazie in anticipo.

Antonio
27-01-2004, 16.40.46
heracleum

Scusami, penso che il metodo di gve (che sfrutta pienamente e correttamente gli Style Sheets) sia molto meglio dei button, cioè se ci pensi bene, cosa cambia? se lo sfondo cambia ad un DIV oppure ad un button qual è la differenza? Anche se non usa fisicamente i button, non è l'effetto che vuoi tu? :wink:
27-01-2004, 16.52.12

come ti ha detto gve è giusto, fa proprio quello che hai detto tu, cioè cambiare sfondo al passaggio del mouse.... cambia solo

questa riga:
<div class="linked"><a href="..." target="...">link</a></div>

con questa:
<a href="..." class="linked" target="...">link</a>

:wink:
27-01-2004, 16.53.58
heracleum

Ecco forse volendo fare il pignolo, si potrebbe speficifare più precisamente invece del solo
background:url(blueX.jpg);
più precisinamente:
background-image:url(blueX.jpg);

dato che quando si definisce solo 'background:' per precisione si dovrebbero indicare tutti i suoi -parametri (-background, -image, e gli altri di allineamento che non ricordo, -repeat e cose simili).

Per il resto mi sembra molto efficace.
Ecco giusto qualcuno potrebbe far notare che non tutta l'area del div è cliccabile (forse sarebbe meglio SPAN?) dato che il link potrebbe essere più piccolo delle dimensioni del div: a quel punto il link contenuto dovrebbe avere propietà di stile tipo:
[code:1:50473ccf42]<a href=".." style="width:100%; height:100%;"> ..</a>[/code:1:50473ccf42]
così da ricoprire tutta l'area del div che lo contiene...

Ma forse ti sto solo confondendo con un sacco di chiacchiere :D
27-01-2004, 17.20.23

Citazione:

Originalmente inviato da Jole

come ti ha detto gve è giusto, fa proprio quello che hai detto tu, cioè cambiare sfondo al passaggio del mouse.... cambia solo

questa riga:
<div class="linked"><a href="..." target="...">link</a></div>

con questa:
<a href="..." class="linked" target="...">link</a>

:wink:

Io userei il comando span

tipo:

<span class="linked"><a href=".." target="..">Link</a></span>

oppure

<p class="linked"><a href=".." target="..">Link</a></p>