Image plus grande quand on passe dessus.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Image plus grande quand on passe dessus.

Prozac-72

Bonjour,
je suis tombé sur un site qui m'a enormément troublé car dès que l'on passe la souris sur une image une fenêtre apparait avec l'image en plus grand. Ce n'est pas du flash, mais autre chose. Quelqu'un sait-il de quoi il en retourne ?
Je vous donne l'adresse du site : http://www.templatemonster.com/
Ah oui et surtout : comment on fait ca ?

En vous remerciant par avance...

Publicité

Flyman30

http://css.alsacreations.com/Const [...] javascript

Prozac-72

Oui mais non...
En fait j'ai sorti de code source et j'ai trouvé cela : comme code

Citation :

Vous pouvez me l'expliquer car je ne comprend pas bien. En effet, la fenetre qui apparait c'est quoi ? C'est un calque ?

Merci de votre aide.

Message cité 1 fois
Message édité par Prozac-72 le 18-06-2006 à 23:17:06

xtof_83

Freeride Spirit

Prozac-72 a écrit :

Oui mais non...
En fait j'ai sorti de code source et j'ai trouvé cela : comme code

___________________________
<a style="cursor: hand" href="/website-templates/11227.html" target="_blank"><IMG SRC="http://images.templatemonster.com/screenshots/11200/11227-m.jpg" border=0 alt='Template 11227' border=1 style="border-color: 777777"
onmouseover="showtrail('http://images.templatemonster.com/screenshots/11200/11227-b.jpg ','Template 11227',430,430)" onmouseout="hidetrail()"
></a>

______________________________
Vous pouvez me l'expliquer car je ne comprend pas bien

Non on va pas texpliquer...surtout pour du code sortie de la galaxie noob45...

On te file une soluce, toute belle, toute propre, exploite là

lyneus

Moi avant j'avais fait un truc comme ceci, après t'a juste à régler les carractéristiques.

Code :

<SPAN style="position: absolute; top: 150 px; left: 100px;width: 800px; height: 0px">
<A HREF="Dossier_Play-Yan_micro_suite.html" onMouseover="Permut(1,'IMG1');" onMouseout="Permut(0,'IMG1');">
<IMG SRC="Boite_petite.bmp" border=1 NAME="IMG1" onLoad="preloadPermut(this,'Boite_grande.gif');" ></A>
</SPAN>
<SPAN style="position: absolute; top: 150 px; left: 203px;width: 800px; height: 0px">
<A HREF="Dossier_Play-Yan_micro_suite.html" onMouseover="Permut(1,'IMG2');" onMouseout="Permut(0,'IMG2');">
<IMG SRC="Play_yan_micro_petit.bmp" border=1 NAME="IMG2" onLoad="preloadPermut(this,'Play_yan_micro_grand.gif');" ></A>
</SPAN>
<SPAN style="position: absolute; top: 150 px; left: 1px;width: 800px; height: 0px">
<A HREF="Dossier_Play-Yan_micro_suite.html" onMouseover="Permut(1,'IMG3');" onMouseout="Permut(0,'IMG3');">
<IMG SRC="Play_yan_micro_petit2.bmp" border=1 NAME="IMG3" onLoad="preloadPermut(this,'Play_yan_micro_grand2.gif');" ></A>
</SPAN>

Prozac-72

non mais surtout c'est quoi ces notions "showtrail" et "hidetrail" ?

xtof_83

Freeride Spirit

Ce sont des fonctions que logiquement tu dois avoir créé

[:jean-guitou]

Prozac-72

ah ok... donc cela référe à un code qui est quelque part sur le site, si j'ai bien compris.

xtof_83

Freeride Spirit

[:aia] Oléééé , tu as tout compris

lyneus

Salut, mon site avance petit à petit, sauf concernant ceci :
J'aimerais faire pareil que Prozac-72 sur son site (http://www.templatemonster.com/ ).
Je veux simplement avoir quelque chose de clair pour que, quand je passe la souris sur cette image (MWS.bmp) elle devienne cette image (MWSgd.gif) et quand j'enlève la souris, l'image redevient comme au début.

Message édité par lyneus le 24-08-2006 à 04:12:36

Publicité

mIRROR

Chevreuillobolchévik

lyneus

c'est parfait merci, sauf qu'il y à un tout petit truc, c'est que quand je la grande image se met, elle déforme un peu tout le site...je voudrais juste qu'elle passe au dessus des autres images ou texte.

Message cité 1 fois

mjcom

le savoir est universel

lyneus a écrit :

Je pense que tu devrais faire une boite dans laquelle tu mets ton image avec du CSS

Code :

.boite {
position: absolute;
height: 131px;
width: 200px;
visibility:hidden;
}

Ensuite tu fais 2 fonctions:

Code :

<script language="JavaScript">
function afficher (adresse, x,y){document.all.boite.style.backgroundImage=adresse;
document.all.boite.style.left=x;
document.all.boite.style.top=y;
document.all.boite.style.visibility="visible";
}
function cacher () {
document.all.boite.style.visibility="hidden";
}
</script>

Tu fais un area shape sur ta premiere image. N'oublies pas de insérer dans ta balise image usemap="#Map".
voila le code de la suite:

Code :

<img src="....jpg" border="0" usemap="#Map" />
<div id="boite" class="boite" ></div>
<p>
<map name="Map" id="Map">
<area onmouseover="afficher('url(adresse/deton/image.jpg)',x,y,')" onmouseout="cacher()" shape="square" coords="....." nohref />

Voila si ta des questions n'hésite pas

Message cité 1 fois

---------------
[:bossik]

lyneus

Euuh, vu que je ne suis pas encore un expert en html et css, je préfèrerais rester dans les choses simple, mais je vais quand tester ce que tu m'as donné. Donc je recherche toujours le petit truc qui permettrait à mon image de ne pas déformer ma page.

mIRROR

Chevreuillobolchévik

mjcom a écrit :

[:pingouino]

va apprendre le html toi [:sarko]

mjcom

le savoir est universel

koi ca marche!!!

---------------
[:bossik]

lyneus

Svp, je veux juste un truc simple qui tient sur une ligne pour pas que ça déplace tout mon site quand la grande image s'affiche.

chani_t

From Dune

Et en mettant ton image dans un conteneur css, dont tu aurais modifié le z-index, afin qu'il soit au dessus de ton texte.. ainsi l'image tu la place en relatif par rapport au texte, et quand tu passe dessus elle grossis, mais elle risque de cacher une partie du texte...

lyneus

c'est pas grave qu'elle cache le texte, c'est le but....
il y à pas juste une balise à rajouter à ça...

Code :

<img src="mwseu1.png" onmouseover="this.src='mwsgdcl4.gif'" onmouseout="this.src='mwseu1.png'"/>

...juste pour dire qu'il faut que sa passe dessus :??:

chani_t

From Dune

va voir ICI pour le fonctionnement du z-index.

Je ne pense pas qu'il y ai de solution plus simple.

lyneus

J'ai mis ça :

Code :

<center><p class="obj2">
<br />
<img src="img/MWS.bmp" onmouseover="this.src='img/MWSgd.gif'" onmouseout="this.src='img/MWS.bmp'" /></p>
<br />
<p class="obj1">Magic WorkStation est un petit logiciel qui vous permet de jouer au célèbre jeux de crates Magic sur internet. Il est gratuit, cependant il existe une version payante qui vous permet d'avoir des options en plus.
<br />
<br />
</p></center>

Et dans mon CSS àa :

Code :

.obj1 {
z-index: 1;
}
.obj2 {
z-index: 2;
}
.obj3 {
z-index: 3;
}

Et ça m'a rien changé, cela déforme toujours le site...

Pour vous donner une petite idée, voici mon site... http://multymygames.rox.fr

Message édité par lyneus le 24-08-2006 à 13:28:39

lyneus

C'est bon, après pleins d'éssais et de réflexion, j'ai réussi.

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Image plus grande quand on passe dessus.

Sujets relatifs
Image qui ne s'affiche pas...	lien image
format image html	aide pour image php
zoom sur image??	Image Submit
Soumettre avec une image	Image Submit
Mail HTML avec image	Image aléatoire en signature sur forum phpBB
Plus de sujets relatifs à : Image plus grande quand on passe dessus.

Page générée en 0.094 secondes