borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
ho un piccolo problemino con js
ho un'immagine e vorrei che passando sopra il mouse si aprissa una finestra (e sin qui ok) e quando il mouse è fuori la finestra si richidesse.
questo è il codice che sto cercando di usare
PHP:
echo "<img src=\"$immagine\" alt=\"$nome\" width=\"180\" height=\"112\" border=\"0\" onMouseOver=\"window.open('finestra.php','finestra','width=500');\" onMouseOut=\"window.close();\"/> $nome<br>";
ma, quando sono sopra la finestra si apre e uscendo non si richiude più (salvo col clic sulla x del bw)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,

ti ho fatto un piccolo esempio

HTML:
<script type="text/javascript">
function finestra(azione) {
    if(azione == 'apri') {
        fin = window.open('finestra.php','finestra','left=400 width=500');
        return;
    }
    fin.close();
}
</script>

<img src="immagine.png" onMouseOver="finestra('apri')" onMouseOut="finestra('chiudi')"/>

vedi se riesci ad adattarlo al tuo codice php

In ogni caso ti conviene crearti una funzioncina e richiamare quella
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao criric
non chiude. se guardi le righe commentate vedi le prove che ho fatto.
ho aggiunto un alert e con onMouseOut appare, ma non si chiude la finestra,
inoltre mettendo left=400 non legge pià la largezza.

PHP:
<script type="text/javascript">
function finestra(azione) {
    if(azione == 'apri') {
        fin = window.open('finestra.php','finestra','width=500');
        return;
    }//else if(azione == 'chiudi'){
		alert('chiudo');
		fin = close();
		//window.close();
		//finestra.window.close();
		//fin = window.close();
		//return;
	//}
}
</script>
<p><img src="due.jpg" onMouseOver="finestra('apri')" onMouseOut="finestra('chiudi')"/></p>
<!--<p><img src="due.jpg" onMouseOut="finestra('chiudi')" onClick="finestra('chiudi')"/></p>-->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="../admin.php">torna</a></p>

poi (ma penso da considerare in seguito quando sono riuscito ad aprire/chiudere) dovrò considerare che la riga
img src="due.jpg
sarò dinamica cioe del tipo
PHP:
<p><img src="<?php echo $riga['immagine']; ?>" onMouseOver="finestra('apri', 'finesta.php?id=<?php echo $riga['id']; ?>')" onMouseOut="finestra('chiudi')"/></p>

cioè al file finestra.php che si apre devo trasmettere un id
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non

fin = close()

ma

fin.close();
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ho messo left=500 perchè se no la finestra mi si apriva sopra l'iimagine e si chiudeva subito

ma in effetti funziona solo con IE


EDIT:
Per far funzionare il margine anxhe su FF i valori devono essere separati dalla virgola

Codice:
fin = window.open('finestra.php','finestra','width=500,left=500');
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Per il secondo problema puoi modificare la funzione cosi:

HTML:
<script type="text/javascript">
    function finestra(id) {
        if(id) {
            fin = window.open('finestra.php?id=' + id,'finestra','width=500,left=500');
            return;
        }
        fin.close();
    }
</script>
<?php
$immagine = 'due.jpg';
$id = 5764;
?>
<p><img src="<?php echo $immagine ?>" onMouseOver="finestra('<?php echo $id ?>')" onMouseOut="finestra(false)"/></p>
<!--<p><img src="due.jpg" onMouseOut="finestra('chiudi')" onClick="finestra('chiudi')"/></p>-->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="../admin.php">torna</a></p>

Passi l'id alla funzione javascript che lo aggiungerà al link
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
avevi ragione mi sono confuso tra il . e =
in effetti con ff ci vuole la virgola.
comunque ho messo l'else if, è più stabile
PHP:
<script type="text/javascript">
function finestra(azione) {
    if(azione == 'apri') {
        fin = window.open('finestra.php','finestra','left=200, width=500');
        return;
    }else if(azione == 'chiudi'){
		fin.close();
	}
}
</script>
<p><img src="due.jpg" onMouseOver="finestra('apri')" onMouseOut="finestra('chiudi')"/></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="../admin.php">torna</a></p>

poi ti romperò ancora con un altro js :)
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao criric
ci dai un occhio e se c'è qualcosa da modificare (non mi piaceve il window)
PHP:
<script type="text/javascript">
function visualizza(azione, num) {
    elemento="aa"+num;
	var elem = document.getElementById(elemento); 
    elem.style.visibility = azione;
}
</script>
<style type="text/css">
.aa{
	background-color:#CCCCCC;
	width:400px;
	height:auto;
	position:absolute;
	z-index:99;
	left:200px;/*da calcolare in modo da uscire dalle immagini*/
	top:50px;
	visibility:hidden;
	border-color:#FF0000;
	border-width:2px;
	border-style: inset;
}
img{
	margin-right:5px;
}
</style>
<?php
$immagine[0]="../000_VEDIFOTO/prove_ridim/tmb_lago_santo-01.jpg";
$immagine[1]="../000_VEDIFOTO/prove_ridim/tmb_lago_santo-02.jpg";
$immagine[2]="../000_VEDIFOTO/prove_ridim/tmb_lago_santo-03.jpg";
$nome[0]="immagine 01";
$nome[1]="immagine 02";
$nome[2]="immagine 03";
$descrizione[0]="nel mezzo di camin di nostra
vita
mi ritrovai per una selva
oscura";
$descrizione[1]="pane e salam
pane e salam
a fette
gridò pluto
con la voce chioccia
......
voci alte e fioche
e suon di man
con elle";
$descrizione[2]="e ritornammo a riveder le stelle";
//al posto del for e degli arrai ci sarà il while $riga=mysql_fetch_array$q)....e contatore
for($k=0; $k <= 2; $k++){
	$per_testo="<strong>$nome[0]</strong><br>".nl2br($descrizione[$k]);
	echo "<img src=\"".$immagine[$k]."\" alt=\"".$nome[$k]."\" border=\"0\" onMouseOver=\"visualizza('visible', $k)\" onMouseOut=\"visualizza('hidden',$k)\"/>".$nome[$k]."<div class=\"aa\" id=\"aa$k\" >$per_testo</div><br><br>"; 
}
?>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="../admin.php">torna</a></p>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Per quanto riguarda javascript direi che va bene, aggiungerei solo var davanti alla variabile elemento

Per il php ti sei scordato la variabile di incremento $k per richiamare il nome dell'immagine

Per il css prova a vedere se ti piace l'effetto usando display al post di visibility impostandolo a none o list-item in base allìevento
togliendo la position absoluted
HTML:
<script type="text/javascript">
function visualizza(azione, num) {
    var elemento="aa"+num;
    var elem = document.getElementById(elemento); 
    elem.style.display = azione;
}
</script>
<style type="text/css">
.aa{
    background-color:#CCCCCC;
    width:400px;
    height:auto;
/*    position:absolute;
    z-index:99;
    left:200px;da calcolare in modo da uscire dalle immagini
    top:50px;*/
    display:none;
    border-color:#FF0000;
    border-width:2px;
    border-style: inset;
}
img{
    margin-right:5px;
    cursor:pointer;
}
</style>
<?php
$immagine[0]="../000_VEDIFOTO/prove_ridim/tmb_lago_santo-01.jpg";
$immagine[1]="../000_VEDIFOTO/prove_ridim/tmb_lago_santo-02.jpg";
$immagine[2]="../000_VEDIFOTO/prove_ridim/tmb_lago_santo-03.jpg";
$nome[0]="immagine 01";
$nome[1]="immagine 02";
$nome[2]="immagine 03";
$descrizione[0]="nel mezzo di camin di nostra
vita
mi ritrovai per una selva
oscura";
$descrizione[1]="pane e salam
pane e salam
a fette
gridò pluto
con la voce chioccia
......
voci alte e fioche
e suon di man
con elle";
$descrizione[2]="e ritornammo a riveder le stelle";
//al posto del for e degli arrai ci sarà il while $riga=mysql_fetch_array$q)....e contatore
for($k=0; $k <= 2; $k++){
    $per_testo="<strong>$nome[$k]</strong><br>".nl2br($descrizione[$k]);
    echo "<img src=\"".$immagine[$k]."\" alt=\"".$nome[$k]."\" border=\"0\" onMouseOver=\"visualizza('list-item', $k)\" onMouseOut=\"visualizza('none',$k)\"/>".$nome[$k]."<div class=\"aa\" id=\"aa$k\" >$per_testo</div><br><br>"; 
}
?>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://forum.mrwebmaster.it/admin.php">torna</a></p>
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
Ciao,

problema risolto, comunque per i gestori di eventi OnLoad, OnClick, OnMouseOver, OnMouseOut ecc...

tutti e sempre scritti in minuscolo onload onclick ecc... altrimenti non risulteranno compatibili con tutti i Browser :book:

Un saluto e buon lavoro Valeria.
 
Discussioni simili
Autore Titolo Forum Risposte Data
A detect window close con open(location, '_blank').close(); jQuery 4
Shyson Mettere window.close automatic Javascript 17
borgo italia window.close PHP 6
borgo italia window.close() Javascript 7
mythar window.close() Javascript 3
A Aprire la window form Add Connection da codice Visual Basic 4
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0
bubino8 [Javascript] popup di controllo elimina dopo window.print(); Javascript 0
asevenx dubbi su window.print(); Javascript 0
M jquery location e jquery window width jQuery 0
A Caricamento dei Javascript nel window.onload Javascript 3
K window.open (rimpiazzare pagina origine) Javascript 2
M Javascript: fermare window.setInterval e window.setTimeout Javascript 3
L problema jquery easyui window jQuery 4
A Ottenere una stringa da window.prompt Javascript 1
I window.open a seconda del colore del link jQuery 1
Y problema anomalo con window.location.href Javascript 2
Fabrizio Fiorita window.print non stampa i backgrounds Javascript 6
A Parametro visibility hidden in relazione a window.screen.width Javascript 10
Shyson Personalizzare window.alert Javascript 1
voldemort Diffrenza tra $(document).ready vs. $(window).load jQuery 1
emanuelevt document.body.scrollTop - window.onscroll Javascript 0
I window.open - reload - about:blank Javascript 1
D funzione window.open Flash 2
N window.open Javascript 8
O apertura window trasparenti Javascript 2
T Maximising a new window HTML e CSS 1
J login asp + login window Classic ASP 0
B window confirm Javascript 3
A Problema con window.print() con Firefox Javascript 0
A Stampa pagina con window.print() Javascript 0
E Window.print() solo se campi obbligatori compilati Javascript 6
T window.event Javascript 1
R window.print Javascript 1
V window.open Javascript 1
D comando window.print() Javascript 1
A WS_FTP Pro Window HTML e CSS 2
V Chiusura dialog con il close (x) Ajax 1
A Apertura pdf con comando close Javascript 1
S Lightbox 2 (Pulsante close) Javascript 3
C Bottone Close per chiudere Iframe/Popup Javascript 2
P pulsante close di Lighbox2 Javascript 0
A Form.close & form.show. POCKET PC Programmazione 0
G onClick="self.close()" HTML e CSS 8

Discussioni simili