Question toute bete en html

Question toute bete en html

Question toute bete en html - HTML/CSS - Programmation

Marsh Posté le 08-09-2008 à 15:12:06

Voila je block sur un truc que je sais ultra simple mais meme sur google je ne trouve pas la solution ,

voila sous dreamweaver , je met une photo en miniature , et je fais un lien _blank pour la faire ouvrir en pop up , le pb c que ca ouvre la photo mais carrement une grande page web , moi je voudrais un pop up de la taille de la photo , comment faire ?

---------------
wii mario kart : Rage@HFR : 1762-2813-2421

Reply

Marsh Posté le 08-09-2008 à 15:12:06

Reply

Marsh Posté le 08-09-2008 à 15:14:32

javascript est ton ami

http://www.script-masters.com/home [...] 6-121.html
voila ton bonheur

Reply

Marsh Posté le 08-09-2008 à 15:41:49

En faite je cherche surtout a pouvoir faire une petite miniature de photo et lorsque l'on passe la souris dessus la miniature s'agrandit et affiche la photo ? sans cliker dessus c'est possible ?

exactement ca en faite : je vais regarder la source d'ailleurs

http://www.nobodysperfect.freesurf [...] gnette.htm

Message édité par raging_bull le 08-09-2008 à 15:44:59

---------------
wii mario kart : Rage@HFR : 1762-2813-2421

Reply

Marsh Posté le 08-09-2008 à 15:43:44

Voili:

<script language="JavaScript">
function display_photo(p_name,p_w,p_h,p_legend) {
if (self.innerWidth) {
winwidth = self.innerWidth;
winheight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
winwidth = document.documentElement.clientWidth;
winheight = document.documentElement.clientHeight;
}
else if (document.body) {
winwidth = document.body.clientWidth;
winheight = document.body.clientHeight;
}
if (Number(p_w) < winwidth) winwidth = Number(p_w);
if (Number(p_h) < winheight) winheight = Number(p_h);
winwidth += 8; winheight += 40;
pwin=window.open("","","toolbar=0,location=0,directories=0,status=0,
menubar=0,resizable=1,scrollbars=yes,copyhistory=0,
width="+winwidth+",height="+winheight+",left=10,top=10" );
pwin.document.write("<html><head>" );
pwin.document.write("<title>Zoom</title>" );
pwin.document.write("<style type=text/css>" );
pwin.document.write("body {" );
pwin.document.write("margin:0;" );
pwin.document.write("padding:0;" );
pwin.document.write("color:white;" );
pwin.document.write("background-color:black; }" );
pwin.document.write("</style>" );
pwin.document.write("</head>" );
pwin.document.write("<body>" );
pwin.document.write("<img src="+p_name+" width="+p_w+" height="+p_h+">" );
pwin.document.write("<table noborder width=100%><tr>" );
pwin.document.write("<form><td align=left>"+p_legend+"</td>" );
pwin.document.write("<td align=right><input type='button' value='Fermer' onClick='window.close()'></td>" );
pwin.document.write("</tr></table></form>" );
pwin.document.write("</body></html>" );
}
</script>
...
<a href="javascript:display_photo('la_photo_grandetaille.jpg','1160','828','Une légende')"
onmouseover="javascript:display_photo('la_photo_grandetaille.jpg','1160','828','Une légende')">
<img src="la_photo_miniature.jpg">
</a>

Message cité 1 fois
Message édité par olivthill le 08-09-2008 à 15:46:15

Reply

Marsh Posté le 08-09-2008 à 15:45:27

olivthill a écrit :

Voili:

<script language="JavaScript">
function display_photo(p_name,p_w,p_h,p_legend) {
if (self.innerWidth) {
winwidth = self.innerWidth;
winheight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
winwidth = document.documentElement.clientWidth;
winheight = document.documentElement.clientHeight;
}
else if (document.body) {
winwidth = document.body.clientWidth;
winheight = document.body.clientHeight;
}
if (Number(p_w) < winwidth) winwidth = Number(p_w);
if (Number(p_h) < winheight) winheight = Number(p_h);
winwidth += 8; winheight += 40;
pwin=window.open("","","toolbar=0,location=0,directories=0,status=0,menubar=0,resizable=1,scrollbars=yes,copyhistory=0,width="+winwidth+",height="+winheight+",left=10,top=10" );
pwin.document.write("<html><head>" );
pwin.document.write("<title>Zoom</title>" );
pwin.document.write("<style type=text/css>" );
pwin.document.write("body {" );
pwin.document.write("margin:0;" );
pwin.document.write("padding:0;" );
pwin.document.write("color:white;" );
pwin.document.write("background-color:black; }" );
pwin.document.write("</style>" );
pwin.document.write("</head>" );
pwin.document.write("<body>" );
pwin.document.write("<img src="+p_name+" width="+p_w+" height="+p_h+">" );
pwin.document.write("<table noborder width=100%><tr>" );
pwin.document.write("<form><td align=left>"+p_legend+"</td>" );
pwin.document.write("<td align=right><input type='button' value='Fermer' onClick='window.close()'></td>" );
pwin.document.write("</tr></table></form>" );
pwin.document.write("</body></html>" );
}
</script>
...
<a href="javascript:display_photo('la_photo_grandetaille.jpg','1160','828','Une légende')">
<img src="la_photo_miniature.jpg">
</a>

merci bcp je test ca tout de suite

---------------
wii mario kart : Rage@HFR : 1762-2813-2421

Reply

Marsh Posté le 08-09-2008 à 16:34:21

pour le code de olivtil , ca m'afiche ma miniature mais j'ai pas d'appartition de l'image lorsque je passe la souris dessus ?

sinon j'ai essayer avec la source de
http://www.nobodysperfect.freesurf [...] gnette.htm
ca marche je peu meme en cree d'autre le pb c'est que je ne peu pas placé exactement ou je veux la miniature dans ma page web

---------------
wii mario kart : Rage@HFR : 1762-2813-2421

Reply

Marsh Posté le 08-09-2008 à 17:48:37

Il faut rajouter un onmouseover. Je l'ai ajouté dans mon message précédent (mais je ne l'ai pas testé).
Si l'affichage doit se faire dans la même fenêtre, alors on appelle souvent cela du "rollover";

Reply

Marsh Posté le 08-09-2008 à 19:20:02

et pour ce site la pkoi si je cop col la source je peu pas placé ensuite ou je veux la miniature ?

http://www.nobodysperfect.freesurf [...] gnette.htm

---------------
wii mario kart : Rage@HFR : 1762-2813-2421

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *