Question concernant le HTML

Résolu/Fermé

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 - 4 juin 2010 à 14:29
oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 - 5 juin 2010 à 19:37

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

A voir également:

Question concernant le HTML
Editeur html - Télécharger - HTML
Espace en html - Astuces et Solutions
&Nbsp html ✓ - Forum Webmastering
Br html ✓ - Forum Webmastering
Vous avez une alerte concernant votre compte steam - Forum Jeux vidéo

11 réponses

Réponse 1 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
4 juin 2010 à 15:06

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.

Réponse 2 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
4 juin 2010 à 17:40

Personne?

Réponse 3 / 11

kouki1000 Messages postés 108 Date d'inscription dimanche 8 février 2009 Statut Membre Dernière intervention 5 novembre 2010 9
Modifié par kouki1000 le 4/06/2010 à 18:04

<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!

Réponse 4 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
Modifié par oRbient le 4/06/2010 à 18:10

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 :)

kouki1000 Messages postés 108 Date d'inscription dimanche 8 février 2009 Statut Membre Dernière intervention 5 novembre 2010 9
4 juin 2010 à 18:26

Oui, c'est ce que le code est censé faire! Avec en plus la photo qui suit la souris SI elle est sur un des points.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
4 juin 2010 à 18:31

j'ai testé mais ça ne donne pas le résultat escompté !

kouki1000 Messages postés 108 Date d'inscription dimanche 8 février 2009 Statut Membre Dernière intervention 5 novembre 2010 9
4 juin 2010 à 19:01

Normal, c'est un code que j'ai dit SALE, c'est a dire qu'il n'est pas près a être utilisé!

Réponse 6 / 11

kouki1000 Messages postés 108 Date d'inscription dimanche 8 février 2009 Statut Membre Dernière intervention 5 novembre 2010 9
4 juin 2010 à 19:24

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>

Réponse 7 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
Modifié par oRbient le 4/06/2010 à 20:30

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 :)

Réponse 8 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
Modifié par oRbient le 4/06/2010 à 21:05

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()"> 

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.

Réponse 9 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
5 juin 2010 à 06:57

Personne?

Réponse 10 / 11

kouki1000 Messages postés 108 Date d'inscription dimanche 8 février 2009 Statut Membre Dernière intervention 5 novembre 2010 9
5 juin 2010 à 16:17

Remplace simplement les textes par des <img>

Réponse 11 / 11

oRbient Messages postés 84 Date d'inscription samedi 22 septembre 2007 Statut Membre Dernière intervention 11 octobre 2016 1
5 juin 2010 à 19:37

C'est exactement ce que j'ai fait. Mais ça be correspond pas à ma demande.

Discussions similaires

les entrées et les sortées

la balise ou

ou ou

Une question concernant la fibre optique

&nbsp ; Quelle Fonction ?