18041 sujets

Questions générales et questions de débutants

Afficher une ou plusieurs images dans un cadre au survole de la miniat

Bonjour,

Actuellement, je monte un site (actuellement depuis six mois Smiley cligne
Je suis sur WL Small Business.

J'aimerais avoir ça sur mon site :



J'avais trouvé le code HTML qui me permettait de mettre la miniature (avec le lien de la petite image 200x200) et au survole de celle-ci, l'agrandire (avec le lien de la grande image 800x800)

Le problème est que j'ai laissé tomber parce que la grande image s'affiche sur la petite à partir du point haut gauche mais ne s'enlève plus sion enlève la souris, pire, comme WL Small Business utilise une case de module HTML ou j'y met le code, cette case à des propriété de grandeur.
Si je met "200x200px" on ne voit que 200x200 du haut gauche de la grande image lorsqu'elle s'agrandie et si je met 800x800, je ne peux plus rien inscrire sous la photo car l'espace est réservé à la case HTML de 800x800 !

Je pète un plomb ! Smiley biggol
Salut,

même si on voit à peu près de quoi tu parles il manque à priori quelque chose dans ton message (après J'aimerais avoir ça sur mon site). Smiley cligne
Salut Heyoan,

Merci de t'inresser à on soucis.

Je suis tellement préssé, stressé que je me suis repris à 5x pour envoyer l'image.
Une fois j'ai tout effacé comme un c.. et Ctrl + Z n'a pas fonctionné, une fois j'ai cliqué sur l'image de prévisualisation et en revenant, il m'a tout perdu, une fois j'ai refermé la mauvaise fenêtre, une fois il m'annonce que je ne suis pas identifié et m'a tout perdu...

Enfin bref, je me rend dingue tout seul.

Je pense que le serveur du site doit être saturé de ma seule image puisqu'à chaque fois j'ai dû la retélécharger Smiley biggol Désolé !
Pas de problème... par contre tu as un bouton "éditer" en haut à droite quand tu es connecté. Smiley langue

Pour ce qui est de ta question il existe une foultitude de scripts JavaScript qui font ça très bien. En CSS tu peux partir sur cette base :
#diaporama {
	width: 402px;
	height: 472px;
	padding: 10px;
	border: 1px solid grey;
	position: relative;
}
#cadre {
	width: 400px;
	height: 400px;
	border: 1px solid grey;
	margin-bottom: 10px;
}
#diaporama span {
	display: none;
}
#diaporama img {
	border: none;
}
#diaporama > a img {
	width: 60px;
	height: 60px;
	margin-right: 5px;
}
#diaporama span img {
	width: 400px;
	height: 400px;
}
#diaporama > a:hover span, 
#diaporama > a:focus span, 
#diaporama > a:active span {
	display: inline;
	position: absolute;
	top: 11px;
	left: 11px;
}
<div id="diaporama">
	<div id="cadre"></div>
	<a href="grande_image_1.jpg" onclick="return false;"><img src="petite_image_1.jpg" alt="Image 1" /><span><img src="grande_image_1.jpg" alt="" /></span></a>
	<a href="grande_image_2.jpg" onclick="return false;"><img src="petite_image_2.jpg" alt="Image 2" /><span><img src="grande_image_2.jpg" alt="" /></span></a>
	<a href="grande_image_3.jpg" onclick="return false;"><img src="petite_image_3.jpg" alt="Image 3" /><span><img src="grande_image_3.jpg" alt="" /></span></a>
</div>
Woooooooo Woooo Woooo Smiley sweatdrop

Doucement, j'ai pas l'habitude que l'ont m'aide aussi vite Smiley lol

Donc je remplace juste les liens d'image par mes liens de mes images ?

Je vais essayer ce soir en rentrant et te tient au courant dans la foulée.

Merci beaucoup Heyoan
Salut,

J'ai essayé mais je crois que le module HTML ne prend en charge QUE le HTML !

Regarde mon essai :

http:///1.aspx

A moins que j'ai fais une erreur quelque part !
Modifié par fredekac (09 Oct 2010 - 19:00)
Euh... il faut revoir les bases. Smiley murf

Le code CSS ne se place pas tel quel en plein milieu du code HTML.

Il faut :
* soit le placer directement dans un élément STYLE :
<head> 
<style type="text/css">
#diaporama {
	width: 402px;
}
</style>
</head>
* soit, mieux encore, dans un fichier externe que l'on charge ensuite : voir cette astuce.
Heyoan, je suis désolé mais j'aurais dû te prévenir.

La seul chose que je connaisse, c'est une partie du code HTML :

<A HREF=""><IMG SRC""></A>

CSS et Javascript sont des bestiole que j'ai croisé mais j'y comprends rien.
De nombreux sites traitent ces sujets mais au bout de 5 lignes, je suis déjà paumé. Ca rentre trop vite dans le sujet.

Du coup ta base et surtout ton lien me sont un peu compliqué.

Regarde ce que j'ai fait : http:///1.aspx
Je pense que tu va me détester Smiley sweatdrop
Modifié par fredekac (09 Oct 2010 - 19:00)
Arf ! Non je ne vais pas te détester. Smiley lol

Par contre sur ce forum nous accompagnons les débutants dans leur apprentissage... mais encore faut-il qu'ils connaissent les bases. Tu pourrais commencer par le site du zéro (ça n'était pas toujours très carré à l'époque mais il me semble que les articles ont été repris depuis).
Modifié par Heyoan (11 Sep 2010 - 23:05)
Sujet clos
Aller à