Question concernant le HTML
Résolu
oRbient
Messages postés
84
Date d'inscription
Statut
Membre
Dernière intervention
-
oRbient Messages postés 84 Date d'inscription Statut Membre Dernière intervention -
oRbient Messages postés 84 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je viens de créer un site internet personnel sur lequel j'aimerai pouvoir mettre des photos de vacances. J'aimerai que l'on m'explique comment m'y prendre pour donner vie à une idée que j'ai à l'esprit. Je voudrai mettre en font de page, une image. Cela, je sais encore le faire. Mais ce que j'aimerai surtout, c'est y placer des sortes de pastilles à différents endroits et sur lesquelles, lorsque je passerai le curseur de la souris, des photos apparaitraient en grand au dessus de chacune d'entre elles.
Merci pour votre aide
Je viens de créer un site internet personnel sur lequel j'aimerai pouvoir mettre des photos de vacances. J'aimerai que l'on m'explique comment m'y prendre pour donner vie à une idée que j'ai à l'esprit. Je voudrai mettre en font de page, une image. Cela, je sais encore le faire. Mais ce que j'aimerai surtout, c'est y placer des sortes de pastilles à différents endroits et sur lesquelles, lorsque je passerai le curseur de la souris, des photos apparaitraient en grand au dessus de chacune d'entre elles.
Merci pour votre aide
A voir également:
- Question concernant le HTML
- Editeur html - Télécharger - HTML
- Br html ✓ - Forum Webmastering
- Espace html ✓ - Forum HTML
- Vous avez une alerte concernant votre compte steam - Forum Jeux vidéo
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
11 réponses
Petite précision, j'aimerai placer sur le font des liens externes mais qui, au passage de la souris, permettraient d'afficher une image. Disons un peu comme le principe des infobulles qui s'affichent lors du passage de la souris mais là, ce serait des photos en infobulles qui apparaitraient.
<head>
<script type="text/javascript">
var X,Y;
function afficherImage1(){
document.getElementById("photo").style.display="block";
}
function cacherImage1(){
document.getElementById("photo").style.display="none";
}
function posPhotos(){
if (evt.pageX) X=evt.pageX;
else if (evt.clientX)
X=evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else X=null;
if (evt.pageY) Y=evt.pageY;
else if (evt.clientY)
Y=evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else Y=null;
document.getElementById("photo").style.left=X;
document.getElementById("photo").style.top=Y;
}
</script>
</head>
<body onMouseMove="posPhotos()">
<img src="pastille.png" onmouseover="afficherImage1()" onmouseout="cacherImage1()" />
<img src="blabla" id="photo" style="display:none;position:absolute" />
</body>
Je sais, c'est sale mais c'est un bon début!
Merci kouki1000,
mais en fait ce n'est pas ce que je veux. Peut-être me suis-je mal expliqué.
Imaginons que sur ma page je veuille mettre une carte de France en font. Je voudrai y placer différents points sur lesquels je pourrai, en positionnant le curseur dessus, faire apparaitre des photos personnelles. Comme une info-bulle mais qui au lieu d'afficher du texte, ferait apparaitre des images.
Merci :)
mais en fait ce n'est pas ce que je veux. Peut-être me suis-je mal expliqué.
Imaginons que sur ma page je veuille mettre une carte de France en font. Je voudrai y placer différents points sur lesquels je pourrai, en positionnant le curseur dessus, faire apparaitre des photos personnelles. Comme une info-bulle mais qui au lieu d'afficher du texte, ferait apparaitre des images.
Merci :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Tiens essaie ca, ca marche:
<html>
<head>
<script type="text/javascript">
var X;var Y;
function afficherImage1(){
document.getElementById("photo").style.display="inherit";
}
function cacherImage1(){
document.getElementById("photo").style.display="none";
}
function posPhotos(ev){
if(ev.pageX || ev.pageY){
X=ev.pageX; Y=ev.pageY;}
else{
X=ev.clientX + document.body.scrollLeft - document.body.clientLeft;
Y=ev.clientY + document.body.scrollTop - document.body.clientTop;}
document.getElementById("photo").style.left=X+"px";
document.getElementById("photo").style.top=Y+"px";
}
</script>
</head>
<body onMouseMove="posPhotos(event)">
<img src="http://static.commentcamarche.net/..." onmouseover="afficherImage1()" onmouseout="cacherImage1()" />
<div id="photo" style="position:absolute;display:none;"><img src="http://static.commentcamarche.net/..." /></div>
</body>
</html>
Ah, c'est un bon début. la photo suit le curseur. Mais malheureusement sur toute la surface du font. Comment ne pointer qu'à un endroit prédéterminé et de petite surface? Car j'aimerai mettre une bonne vingtaine de points sur la carte (le font) afin de faire apparaitre sur chacun une photo au survol de la souris :)
Pour plus de précision, je voudrai utiliser le principe suivant:
<area shape="CIRCLE" coords=" 109, 367, 14" href="https://www.sfr.fr/fermeture-des-pages-perso.html" alt="" onclick="" onmousedown="" onmouseup="" onmouseover="AffBulle('Perigord Noir du 13 au 17 Juillet 2009.')" onmouseout="HideBulle()"><br>
qui permet de créer des liens externes à divers endroits sur le background (selon les coordonnées inscrites). Ce que j'aimerai obtenir, c'est en plus, lors du passage de la souris sur ces-dits liens, une image qui s'afficherait au dessus. Pas sur toute la surface mais disons dans le genre 150X200. J'imagine qu'il existe un code spécifique à ajouter à celui qui est en gras au dessus mais je n'arrive cependant pas mettre la main dessus.
Sur ce site https://www.sfr.fr/fermeture-des-pages-perso.html" (que j'ai créé), on trouve un certain nombre de liens. Sur ceux-ci, lorsque l'on passe la souris dessus, il y a des phrases descriptives qui apparaissent. J'aimerai remplacer ces dernières par de petites photos.
<area shape="CIRCLE" coords=" 109, 367, 14" href="https://www.sfr.fr/fermeture-des-pages-perso.html" alt="" onclick="" onmousedown="" onmouseup="" onmouseover="AffBulle('Perigord Noir du 13 au 17 Juillet 2009.')" onmouseout="HideBulle()"><br>
qui permet de créer des liens externes à divers endroits sur le background (selon les coordonnées inscrites). Ce que j'aimerai obtenir, c'est en plus, lors du passage de la souris sur ces-dits liens, une image qui s'afficherait au dessus. Pas sur toute la surface mais disons dans le genre 150X200. J'imagine qu'il existe un code spécifique à ajouter à celui qui est en gras au dessus mais je n'arrive cependant pas mettre la main dessus.
Sur ce site https://www.sfr.fr/fermeture-des-pages-perso.html" (que j'ai créé), on trouve un certain nombre de liens. Sur ceux-ci, lorsque l'on passe la souris dessus, il y a des phrases descriptives qui apparaissent. J'aimerai remplacer ces dernières par de petites photos.
