Forum sur Sarka-SPIP 3.0

jeudi 19 mai 2011 à 21h39
par philippe

Logo de _Philippe_

Bonjour,

Je vois que le problème est soulevé très souvent dans différents Forums. Si un membre de l’_Equipe_ pouvait recopier ce post dans les "Tutoriels et Astuces" - "Graphisme...."...

Voici comment afficher des images en popup à la taille de l’image au survol d’un lien par la souris. La popup est fermée soit en passant la souris dessus soit en cliquant n’importe ou sur l’écran.

Le résultat de ce tutoriel est visible sur ce site.

  • Modification à apporter à la fin du fichier inc_header.html (à placer dans /squelettes/noisettes) :
  • .../...


	<title>[(#ENV{meta_titre}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>

	[(#REM) <!-- Inclusion des javascripts PG --> ]
	<script language="javascript" type="text/javascript" src="[(#CHEMIN{inc/scripts_pg.js})]"></script>
	
	[(#REM) <!-- Balise permettant aux plugins d'inserer des appels javascript ou css --> ]
	#INSERT_HEAD
	[(#REM) <!-- Agreger et compacter tout cela dans des fichiers statiques --> ]
	#FILTRE{compacte_head}
</head>
  • voici le code de la fonction qui nous intéresse dans le fichier javascript inclus (à placer dans /squelettes/inc) : 
    function PopupImage(img, titre) {
	w1=open("",'image','top=200,left=200,width=1,height=1,location=no, directories=no, status=no, menubar=no, toolbar=no,scrollbars=no,resizable=no');	
	w1.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE>");
	w1.document.write("<script type='text/javascript'>function checksize() {if (document.images[0].complete) { window.resizeTo(document.images[0].width+15,document.images[0].height+80); window.focus();}else { settimeout('checksize()',250) } }</"+"script>");
	w1.document.write("<body onload='checksize()' onblur='window.close()' onclick='window.close()' topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>");
	w1.document.write("<div align='center'>");
	w1.document.write("<IMG src='http://www.golfdemachilly.com/trombines/" +img+ "' border='1' onMouseOver='parent.close()'>");
	w1.document.write("</div>");
	w1.document.close();
}
  • je place ci-dessous le code in extenso de l’article. Une grande partie du texte est en HTML pur afin de mettre des styles directement dans les balises. 
    <img610|left|taille=100>  <img610|right|taille=100>

<table border=0 align=center bordercolor=#C0C0C0 summary="">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="text-align: center; font-size: 1.5em">[Pour contacter un responsable, rendez-vous sur la page Contact.->http://www.golfdemachilly.com/spip/spip.php?page=contact]</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="text-align: center; font-size: 1.5em">ou envoyez lui un message avec votre logiciel de messagerie en cliquant sur son nom.</td>
	</tr>

	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="text-align: center; font-size: 1.5em">Passez la souris sur un nom pour voir le doux minois de son propriétaire.</td>
	</tr>
</table>

<br />&nbsp;

<table border=0 align=center bordercolor=#C0C0C0 summary="">
	<tr>
		<td>&nbsp;</td>
		<td style="text-align: center; font-size: 1.5em"><u>Pr&eacute;sident</u> :<br />&nbsp; <br />[marron]<a name= "jps" onMouseOver="return PopupImage('subtil_jp.gif','Jean-Paul')">Jean-Paul Subtil</a>[/marron]<br />&nbsp; <br />tel. 06 74 45 79 83</td>
		<td>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</td>
	</tr>
	<tr>
		<td></td>
		<td ><hr></td>
		<td></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td style="vertical-align: middle; text-align: center; font-size: 1.5em"><u>Directeur</u> : <br />&nbsp; <br />[marron]
<a name= "jpp" onMouseOver="return PopupImage('pasini_jp.gif','Jean-Pierre')">Jean-Pierre Pasini</a>[/marron]
<br />[<img656>->jean-pierre.pasini@wanadoo.fr]</td>
		<td>&nbsp;<br>&nbsp;<br>&nbsp;</td>
	</tr>
<tr>
		<td></td>
		<td ><hr></td>
		<td></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td style="text-align: center; valign="middle"; font-size: 1.5em"><u>Directeur de Jeu</u> : <br />&nbsp; <br /><a name= "ph" onMouseOver="return PopupImage('hatty_patrick.gif','Patrick')">Patrick H&auml;tty</a><br />[<img656>->o.hatty@wanadoo.fr]<br />tel. 06 79 80 29 17</td>
		<td>&nbsp;<br>&nbsp;<br>&nbsp;</td>
	</tr>
	<tr>
		<td><hr></td>
		<td ><hr></td>
		<td><hr></td>
	</tr>
	<tr>
		<td><hr></td>
		<td ><hr></td>
		<td><hr></td>
	</tr>
	<tr style="text-align: center">
		<td style="text-align: center"><u>Tr&eacute;sori&egrave;re</u> : <br />&nbsp; <br /><a name= "mv" onMouseOver="return PopupImage('trombine0.gif','Malou')">Malou Viginet</a><br /> [<img656>->malou.viginet@orange.fr] <br />tel. 06 84 21 72 81</td>
		<td>&nbsp;</td>
		<td style="text-align: center"><u>Secr&eacute;taire</u> : <br />&nbsp; <br /><a name= "cr" onMouseOver="return PopupImage('reges_caroline.gif','Caroline')">Caroline Regès</a><br />[<img656>->maenza@club-internet.fr]<br />tel. 06 60 53 85 60</td>
	</tr>

	<tr>
		<td>&nbsp;</td>
		<td >&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td >&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>

| {{Membres du Bureau de l'Association : }} |<a name= "rt" onMouseOver="return PopupImage('trombine0.gif','Roland')">Roland Thirvaudey</a>|
||<a name= "pg" onMouseOver="return PopupImage('guerindon_philippe.gif','Philippe')">Philippe Guérindon</a>|

Il vous faudra bien entendu modifier les noms et les chemins.
Les paramètres passés à la fonction sont :

  1. le nom de l’image (le chemin est défini dans la fonction javacript)
  2. le titre à afficher dans la popup (ici le prénom).

Si ça peut aider ...

Philippe

inc_bandeau_bas-2.html

Ce sujet est verrouillé : vous pouvez consulter son fil de discussion mais vous ne pouvez plus y répondre.

Réponses

19 mai 2011 à 21h53
_Philippe_

Logo de _Philippe_

on aurait pu mettre à la fin de la fonction javascript :

	w1.document.write("</div>");
	w1.document.write("</body></head>");
	w1.document.close();

pour fermer les balises body et html et faire « plus propre ».