Script - onmouseover compaiono immagine e testo

kerol

Nuovo Utente
19 Gen 2012
5
0
0
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

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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?
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Ecco qui un esempio:

topo-max.jpg


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.
 
Ultima modifica:

kerol

Nuovo Utente
19 Gen 2012
5
0
0
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

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Dov'è finita kerol? bò... intanto ho preparato quest'esempio...

scritte-sotto-foto-gif.gif


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..

un-sito-come-youtube.jpg


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.
 
Ultima modifica:

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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

scritt-alpha-gif.gif


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
 
Ultima modifica:

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Brava Valeria.... i miei complimenti

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

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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


vale-come.jpg

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
 
Ultima modifica:

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
E [JAVA] modificare Script per evento onmouseover Javascript 0
F Somma di più tabelle da script Javascript 0
L Script per convertire numeri in parole Javascript 2
H Eliminazione script. Photoshop 0
S Script Google Translate scomparso HTML e CSS 3
P lanciare script asp (o php) da jquery Javascript 1
G Script notifiche dekstop aiuto Javascript 0
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
P Passare solo alcuni parametri a script per CSV PHP 0
M Collegamento tra form html e script php PHP 4
F Script java elenco alfabetico non funziona Javascript 3
F Script non funzionante. Devo elencare in ordine alfabetico un elenco di nominativi, ma lo script non Javascript 2
P Script upload immagini jQuery 0
M Premature end of script headers PHP 1
Cosina script data aggiornamento pagina Javascript 1
R Distribuire uno Script "Facebook Auto Post" PHP 0
F Creazione script Tv Presentati al Forum 1
N Script elenco file HTML HTML e CSS 5
felino PHP e script generazione file excel PHP 2
MarcoGrazia Se non sai se riceverai da GET o da POST, puoi verificarlo e far scegliere allo script. Snippet PHP 0
Beppe2 Ritardare esecuzione script Javascript 2
R Primo script in PHP / CSS PHP 4
felino Script PHP per leggere un file JSON. autenticazione? PHP 4
T [a pagamento] programmatore PHP che mi aiuti a migrare gli script da vecchia versione PHP a nuova Offerte e Richieste di Lavoro e/o Collaborazione 1
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
F Aiuto java script Javascript 2
Max 1 [PHP] Script che funziona in locale e non online PHP 16
K Help: problema con uno script di booking in php! PHP 0
O [PHP] inviare dati da form e script ajax PHP 0
P [PHP] Aggiungere un mio script a prestashop? PHP 10
D [Javascript] inserire uno script in un file php Javascript 6
Gabriele15497514 php testo errato durante la lettura del file txt quando lo script viene eseguito contemporaneamente PHP 3
R [Javascript] Aiuto su questo script Javascript 2
M [HTML] Stesso script su 2 blog CMS (Content Management System) 4
romeocharly [PHP] Script per rinominare in automatico le immagini inviate da ftp PHP 0
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
A [PHP] Script con array con numeri che iniziano per 00 PHP 2
F [HTML] Failed script su coffee cookies HTML e CSS 1
TpD [PHP] Script per organizzazione presenza eventi PHP 3
D [PHP] script che invii una mail automatica dopo risposta ad una discussione di un forum PHP 0
T interpretare uno script php non fatto da me... PHP 3
Cosina Modifica script textarea jQuery 0
O Script PHP e loro visibilità PHP 4
A [PHP] Script Ip camera su altervista senza sottocartelle PHP 6
M [PHP] Problema script ricezione e invio posta... PHP 1
Y Codice AdSense su script php PHP 4
L [PHP] Problema Script 'Not Found' PHP 4
webmachine [PHP] Script per censurare parole PHP 4
L [HTML] Domanda: Utilizzo script HTML e CSS 0
C richiamare una funzione in un altro script php PHP 1

Discussioni simili