28173 sujets

CSS et mise en forme, CSS3

[réslou] Agrandir une image à son survol dans une nvlle fenêtre

Bonjour à tous,

j'ai effectué pas mal de recherches et lu pas mal de tuto sur "comment agrandir une image au survol" mais aucun n'explique comment ouvrir l'image dans une sorte de nouvelle fenêtre (ce n'est pas une fenêtre windows ou IE traditionnelle, elles ont un look bcp + proche d'une "bulle d'info") qui vient s'afficher par dessus mon explorateur et qui évitera de foutre en l'air l'organisation des éléments environnants.

Je sais que celà est possible, mais je n'ai pas trouvé le moindre tuto (où alors je ne cherche pas correctement Smiley ravi Smiley sweatdrop ) pour m'indiquer comment ouvrir mon image dans cettes "nouvelle fenêtre" Smiley bawling

je vous remercie de m'orienter dans ma recherche laborieuse Smiley cligne Smiley biggrin
Modifié par moumerico (06 Jun 2007 - 09:18)
Le mieux est de faire passer ton image
dans une div qui se trouvera au dessus de la page (histoire de z-index et positionnement absolu en css). Ta div aura la tête que tu voudra et contiendra l'image agrandie....

Tout ça regroupera du css, du javascript.

<html>
<head>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}

function agrandir(id){
$('popup').style.display='block';
$('imageAgrandie').src=$(id).src;
}

function reduire(){
$('popup').style.display='none';
$('imageAgrandie').src="";
}

</script>

<style>
div#popup{display:none;position:absolute;width:40%;left:30%;top:50%;border:1px solid #ccc;background-color:#000;text-align:center;padding:1em}
div.galerie img{width:100px;border:1px solid #ccc;margin:1em}
</style>

</head>
<body>


<div id="popup">
<img src="" id="imageAgrandie"/>
</div>

<div style="width:100%;text-align:center" class="galerie">
<img src="petite.gif" id="image1" onmouseover="agrandir(this.id)" onmouseout="reduire()" />
<img src="petite.gif" id="image2" onmouseover="agrandir(this.id)" onmouseout="reduire()" />
<img src="petite.gif" id="image3" onmouseover="agrandir(this.id)" onmouseout="reduire()" />
<img src="petite.gif" id="image4" onmouseover="agrandir(this.id)" onmouseout="reduire()" />
<img src="petite.gif" id="image5" onmouseover="agrandir(this.id)" onmouseout="reduire()" />
</div>


</body>
</html>


Regarde ça et dit moi si c'est ce qu'il te faut ...
J'ai pris le logo d'alsacreations pour petite.gif
Sujet clos
Aller à