Script - onmouseover compaiono immagine e testo

kerol · 23 Gen 2012

Ciao a tutti, premetto di essere nuova in quest'ambiente!
vorrei trovare uno script che mi permetta, passando con il mouse sopra un'immagine miniatura, di far comparire nella pagina un'immagine ed un testo.
finora ho trovato questo, con cui però compare solo l'immagine:

Place this script into the body of your html document.
_____________________________________________

<SCRIPT LANGUAGE="JAVASCRIPT">
if (document.images) {
image1 = new Image
image2 = new Image

image1.src = "your-image1.gif"
image2.src = "your-image2.gif"

}
</SCRIPT>

________________________________________

Place this next code where you want the image link.
_________________________________________

<a href="http://www.draac.com/"
onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image1.src"><img src="image.jpg"/></a>
____________________________________________

Place this next code where you want the image to show up.
_______________________________________________

<img src="your-image1.gif" name="imagename" border="0">

...chi mi sa dare una mano?
grazie!

max_400 · 23 Gen 2012

Ciao kerol e benvenuta sul forum

Hai 2 modi per far comparire le scritte o anche di più

con innerHTML
oppure in una casella di input (con document.getElementById('nomecasella')

non so se conosci?

kerol · 23 Gen 2012

uhm .. no

max_400 · 23 Gen 2012

Ecco qui un esempio:

http://max400.netne.net/scritta-sotto-foto.html

quando si tratta di dare 2 azioni al comando onMouseOver è opportuno creare una funzione.
La funzione esegue tutti i comandi legati alla tua azione in questo caso onMouseOver.

Al passaggio del mouse sull'oggetto vengono eseguiti tutti i comandi che si trovano dentro la funzione.

In questo caso non dobbiamo dare 2 azioni alla funzione onMouseOver
1- visualizzare la foto
2- far comparire la scritta relativa alla foto

Se all'azione onMouseOver faccio comparire la Foto di Laura Pausini....
sotto ci deve essere la scritta: "Laura Pausini";

Se all'azione onMouseOut faccio comparire la Foto del Sorcio coi baffi....
sotto ci deve essere la scritta: "Max_400" (che sono io);

ecco il codice:

Codice:

<SCRIPT LANGUAGE="JAVASCRIPT">

function inizio(){
document.getElementById('casella').value="Antonella Clerici";
}

var scritta1="";
var scritta2="";

function prima(){
scritta1="Questo sono io -  Max_400";
document.getElementById('casella').value=scritta1;
document.foto.src = "http://max400.netne.net/2743462613.jpg";

}
function seconda(){
scritta2="Laura Pausini";
document.getElementById('casella').value=scritta2;
document.foto.src = "http://max400.netne.net/f1841b1623852692.jpg";
}

</SCRIPT>
<body onLoad="inizio();">
<a href="http://www.draac.com/"
onMouseover="seconda()" onMouseout="prima()"><img name="foto" src="http://max400.netne.net/antonella_clerici_1266773484.jpg" width=300 height=311></a><br>
<input type="text" id="casella" size="40" value=""><br>

</body>

un ultima cosa:
Quando usi il tag IMG devi specificare anche le dimensioni di una foto altrimenti quelli che usano Internet Exsplorer non gli compare la foto.

Nota di Moderazione:
Hai a disposizione il tag CODE /CODE per inserire lo script come ho fatto io.

kerol · 23 Gen 2012

Rieccomi.. sono costretta a chiederti aiuto nuovamente perchè non saprei come mettere le mani al codice che mi hai dato per modificarlo in questo modo:
ciò che mi serve sono 3 immagini miniatura... passando sopra ciascuna di esse, viene mostrato, IN UN ALTRO RIQUADRO più grande, l' immagine miniatura corrispondente ingrandita.
e in un terzo posto ancora compare la descrizione dell'immagine che in quel momento compare nel riquadro.

max_400 · 23 Gen 2012

In questo caso soltanto onMouseOver?

cioè al passaggio del mouse sopra ognuna di quelle miniature compare
la foto con la descrizione giusto?

La funzione onMouseOut posso toglierla? o gli devo dare un altra funzione?

max_400 · 23 Gen 2012

Dov'è finita kerol? bò... intanto ho preparato quest'esempio...

http://max400.netne.net/scritta-sotto-foto-miniature.html

questo esempio è soltanto con la funzione onMouseOver...

Si può fare in modo che cliccando si va nel sito della Pausini oppure
ad una foto più grande della stessa Pausini.

inoltre ieri avevo fatto qualcosa di simile per un altro utente..

http://max400.netne.net/un-sito-come-youtube-gennaio-2012.html

la struttura è più o meno simile solo che in questo caso si tratta di "video"
presi direttamente da youtube ed inseriti in una tabella, ma ovviamente
si possono mettere foto al posto di video.

kerol · 23 Gen 2012

ooooh!!! perfetto!!
grazie mille Max!!

max_400 · 23 Gen 2012

Dimenticavo il codice

Ecco qua...

Codice:

<SCRIPT LANGUAGE="JAVASCRIPT">

function inizio(){
document.getElementById('casella').value="Antonella Clerici";
}

var scritta1="";
var scritta2="";

function prima(){
scritta1="Questo sono io -  Max_400";
document.getElementById('casella').value=scritta1;
document.foto.src = "http://max400.netne.net/2743462613.jpg";

}
function seconda(){
scritta2="Laura Pausini";
document.getElementById('casella').value=scritta2;
document.foto.src = "http://max400.netne.net/f1841b1623852692.jpg";
}

function terza(){
scritta3="Monica Bellucci";
document.getElementById('casella').value=scritta3;
document.foto.src = "http://max400.netne.net/monica_bellucci.jpg";
}

</SCRIPT>

<body onLoad="inizio();">
<a href="http://www.draac.com/"
onMouseover="seconda()" onMouseout="prima()"><img name="foto" src="http://max400.netne.net/antonella_clerici_1266773484.jpg" width=300 height=311></a><br>
<input type="text" id="casella" size="40" value=""><br><br>

<!---------------------miniature------------------------------------------->
<a href="http://www.draac.com/"
onMouseover="prima()" onMouseout="prima()"><img  src="http://max400.netne.net/2743462613.jpg" width=100 height=110></a>

<a href="http://www.draac.com/"
onMouseover="seconda()" onMouseout="seconda()"><img src="http://max400.netne.net/f1841b1623852692.jpg" width=100 height=110></a>

<a href="http://www.draac.com/"
onMouseover="terza()" onMouseout="terza()"><img  src="http://max400.netne.net/monica_bellucci.jpg" width=100 height=110></a>
</body>

Però sarebbe meglio quest'altro con effetto alpha

esempio
http://max400.netne.net/scritte-sotto-foto-con-alpha.html

il codice:

Codice:

<SCRIPT LANGUAGE="JAVASCRIPT">

num=0.1;
function inizio(){

document.foto.style.opacity=num;
document.getElementById('casella').value="Antonella Clerici";
}

function incremento(){
num=num+0.1;
document.foto.style.opacity=num;
}

timer=setInterval("incremento()",500);

var scritta1="";
var scritta2="";

function prima(){
num=0.1;
document.foto.style.opacity=num;
scritta1="Questo sono io -  Max_400";
document.getElementById('casella').value=scritta1;
document.foto.src = "http://max400.netne.net/2743462613.jpg";

}
function seconda(){
num=0.1;
scritta2="Laura Pausini";
document.getElementById('casella').value=scritta2;
document.foto.src = "http://max400.netne.net/f1841b1623852692.jpg";
}

function terza(){
num=0.1;
scritta3="Monica Bellucci";
document.getElementById('casella').value=scritta3;
document.foto.src = "http://max400.netne.net/monica_bellucci.jpg";
}

</SCRIPT>

<body onLoad="inizio();">
<a href="http://www.draac.com/"
onMouseover="seconda()" onMouseout=""><img name="foto" src="http://max400.netne.net/antonella_clerici_1266773484.jpg" width=300 height=311></a><br>
<input type="text" id="casella" size="40" value=""><br><br>

<!---------------------miniature------------------------------------------->
<a href="http://www.draac.com/"
onMouseover="prima(); this.style.opacity=1" onMouseout="this.style.opacity=0.4"><img  src="http://max400.netne.net/2743462613.jpg" width=100 height=110></a>

<a href="http://www.draac.com/"
onMouseover="seconda(); this.style.opacity=1" onMouseout="this.style.opacity=0.4"><img src="http://max400.netne.net/f1841b1623852692.jpg" width=100 height=110></a>

<a href="http://www.draac.com/"
onMouseover="terza(); this.style.opacity=1" onMouseout="this.style.opacity=0.4"><img  src="http://max400.netne.net/monica_bellucci.jpg" width=100 height=110></a>
</body>

Quest'effetto alpha o più precisamente a comparsa funziona solo sotto Firefox
per quelli che hanno Internet Explorer ci vuole il filter quindi bisogna modificare lo script ma io purtroppo non ce l'ho Explorer e non posso provare.

Altri dettagli: possiamo aumentare la velocità dell'effetto "a comparsa"
modificado il setInterval... questa riga
timer=setInterval("incremento()",500);
e mettere 100 oppure 1 .... l'effetto comparsa dovrebbe essere molto più rapido...
oppure modificare il num

au revoir
by Max_400

kerol · 24 Gen 2012

Ti ringrazio davvero tanto!
Se posso chiederti, tu come hai imparato?

max_400 · 24 Gen 2012

Mi ha insegnato Albert Einstein...eh eh

Veramente la mia materia è Flash. Ma c'è poca attività in quella sezione
e quindi mi sono fatto assegnare questa sezione.
Flash l'ho imparato a scuola con un insegnante che ti spiega tutti i dettagli del programma
il mese prossimo inizio un altro corso di web designer cosi prenderò la mia 7 qualifica professionale.

Però a scuola non insegnano javascript...questa metria l'ho imparato da solo, ho raccolto un bel pò
di script molto importanti che tengo in cassaforte ...ih ih ih ... tra poco farò dei Tutorial
non solo di Flash ma anche javascript ma anche altre materie html-css-visual basic ecc...
e li metterò a disposizione di questo forum.

l'effetto alpha o meglio l'opacity ti è riuscito?
effetto alpha è un termine usato in Flash in cui si intende la trasparenza
in javascript forse è più corretto dire l'opacity.

Per qualsiasi cosa non esitare a ad aprire una discussione e ti spiegherò ogni cosa :fonzie:
a cominciare dalle nozioni di base fino a quelle più complesse.

Buona giornata!

Er Moderator
by Max_400

Vale2 · 24 Gen 2012

Ciao,

per il filter per MSIE devi usate un ALPHA.

invece di scrivere per ogni immagine una funzione, puoi semplificare lo script (che è già ben fatto) usando una sola funzione per quante immagini vuoi, mettendo i vari parametri per richiamo delle variabili nella function, e la configurazzione nel gestore di evento onmouseover.

Una nota, è buona prassi scrivere i nomi dei gestori di eventi come onLoad o come usato nell'esempio onMouseOver tutto in minuscolo sempre.

onload onmouseover onmouseout, alcuni Browser non digeriscono completamente i nomi come si scrivevano per il vecchio html - js di anni fa. Eccetto natursamente i gestori o le parole chiave che hanno una loro precisa scirttura.

Codice:

<script type="text/javascript">
function miniature(imm,nome,w,h){
nome=document.getElementById('casella').value=nome;
document.foto.width=w; 
document.foto.height=h;
document.foto.src=imm;
}
</script> 
</head>

<body>
<img name="foto" src="antonella_clerici_1266773484.jpg" width="300" height="301"><br>
<input type="text" id="casella" size="40" value=""><br><br>

<img src="2743462613.jpg" width"100" height="110" onmouseover="javascript:miniature('2743462613.jpg','Questo sono io -  Max_400','300','301')">

<img src="f1841b1623852692.jpg" width"100" height="110" onmouseover="javascript:miniature('f1841b1623852692.jpg','Laura Pausini','300','301')">

<img src="monica_bellucci.jpg" width"100" height="110" onmouseover="javascript:miniature('monica_bellucci.jpg','Monica Bellucci','300','301')">

</body>

javascript:miniature('monica_bellucci.jpg','Monica Bellucci','300','301')

il primo tra gli apigi singoli è l'immagine che visualizzi con onmouseover il secondo è il testo associato allimagine il terzo e il quarto sono le dimensioni dell'immagine visualizzata width"" e height="" in questo modo puoi visualzzare es. alcune immagini di dimensioni differenti a piacere.

Valeria.

max_400 · 24 Gen 2012

Brava Valeria.... i miei complimenti

Vale2 ha scritto:
Ciao,

per il filter per MSIE devi usate un ALPHA.

Una nota, è buona prassi scrivere i nomi dei gestori di eventi come onLoad o come usato nell'esempio onMouseOver tutto in minuscolo sempre.

onload onmouseover onmouseout, alcuni Browser non digeriscono completamente i nomi come si scrivevano per il vecchio html - js di anni fa. Eccetto natursamente i gestori o le parole chiave che hanno una loro precisa scirttura.

javascript:miniature('monica_bellucci.jpg','Monica Bellucci','300','301')

il primo tra gli apigi singoli è l'immagine che visualizzi con onmouseover il secondo è il testo associato allimagine il terzo e il quarto sono le dimensioni dell'immagine visualizzata width"" e height="" in questo modo puoi visualzzare es. alcune immagini di dimensioni differenti a piacere.

Valeria.

Si è meglio utilizzare i paramentri di funzione in modo da inserire o diversi formati delle foto
ad esempio ne ho modificato una l'ultima della bellucci lasciano l'altezza costante e modificando

<img src="monica_bellucci.jpg" width"100" height="110" onmouseover="javascript:miniature('monica_bellucci.jpg','Monica Bellucci','500','301')">

Questo è l'esempio di valeria
http://max400.netne.net/dfdfdf.html

Per quanto riguarda l'effetto trasparenza bisognerebbe fare in modo
che lo script sia compatibile con tutti i browser e quindi aggiungere qualkosa
ovviamente io uso solo Firefox.

max_400 · 24 Gen 2012

Dov'è finita kerol?

se l'esempio dei parametri suggerito da Valeria dovesse esserti più complicato

ho fatto qualkosa di semplice con 2 righe tanto per spiegare i parametri di funzione :book:
con un esempio molto più semplice

http://max400.netne.net/parametri-di-funzione.html

Ecco il codice più ristretto possibile:

Codice:

<script>

function valeria(stato,testo){
document.getElementById('casella').value=testo;
stato=document.foto.src=stato;
}

</script>

<div align=center>

<h1><font color=red>Valeria com'è?</font><br>
<img id="foto" src="Punto_interrogativo.jpg" width"" height="301"><br>
<input type="text" id="casella" size="40" value=""><br><br>

<input type="button" onclick="valeria('http://max400.netne.net/ccc4.jpg','Me la sposo!')" value="bella">
<input type="button"  onclick="valeria('http://www.mybefana.it/images/befana.gif','Lasciamo perdere')" value="brutta">
</div>

Vale? Per caso sei parente del gatto?
anche a lui piacciono i parametri di funzione eh eh..

a più tardi...

au revoir
by Max_400

Vale2 · 25 Gen 2012

Ciao,

carino l'esempio Max_400,

per l'effetto fade anche per Msie

Codice:

<script type="text/javascript">
var ie=(document.all);
var ns=(document.getElementById && !document.all);
function miniature(imm,nome,w,h){
document.getElementById('casella').value=nome;
document.foto.width=w; 
document.foto.height=h;
if(ns){
num=parseFloat(0.5);
document.foto.style.opacity=num;
document.foto.src=imm;
}
if(ie){
num1=parseInt(50);
foto.style.filter="alpha(opacity=num1)";
foto.filters.alpha.opacity = num1;
document.foto.src=imm; 
}
}
</script> 
</head>

<body>
<img name="foto" style="filter:alpha(opacity=50);opacity:0.5" src="antonella_clerici_1266773484.jpg" width="300" height="301"><br>
<input type="text" id="casella" size="40" value=""><br><br>

<img src="2743462613.jpg" width="100" height="110" onmouseover="javascript:miniature('2743462613.jpg','Questo sono io -  Max_400','300','301')" onmouseout="if(ns)foto.style.opacity=parseInt(10);if(ie)foto.style.filter='alpha(opacity=100)';">

<img src="f1841b1623852692.jpg" width="100" height="110" onmouseover="javascript:miniature('f1841b1623852692.jpg','Laura Pausini','300','301')" onmouseout="if(ns)foto.style.opacity=parseInt(10);if(ie)foto.style.filter='alpha(opacity=100)';">

<img src="monica_bellucci.jpg" width="100" height="110" onmouseover="javascript:miniature('monica_bellucci.jpg','Monica Bellucci','300','301')" onmouseout="if(ns)foto.style.opacity=parseInt(10);if(ie)foto.style.filter='alpha(opacity=100)';">

quando si utilizzano numeri in virgola mobile si usa la dichiarazione parseFloat(num) Msie non digerisce i numeri con decimali senza.

Valeria.

max_400 · 25 Gen 2012

Cara Valeria...tu devi essere parente di Alessandro...

...ogni volta mi fai rimanre a bocca aperta
però sono curioso di sapere come sei?

Assomiglia alla prima immagine oppure alla seconda? ih ih ih

(scherzo) :fonzie:

Cerca

Cerca

Script - onmouseover compaiono immagine e testo

kerol

Nuovo Utente

max_400

Utente Attivo

kerol

Nuovo Utente

max_400

Utente Attivo

kerol

Nuovo Utente

max_400

Utente Attivo

max_400

Utente Attivo

kerol

Nuovo Utente

max_400

Utente Attivo

kerol

Nuovo Utente

max_400

Utente Attivo

Vale2

Utente Attivo

max_400

Utente Attivo

max_400

Utente Attivo

Vale2

Utente Attivo

max_400

Utente Attivo

Discussioni simili