window.close()

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.044
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)
 
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
 
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
 
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:
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
 
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 :)
 
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>
 
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>
 
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