11548 sujets

JavaScript, DOM et API Web HTML5

Rollover sur une personne ou un objet

Bonjour,

en faite, je voudrai creer un rollover à partir d'une photo : par exemple sur cette photo j'ai 3 personnes et si je passe la sourie sur l'une d'entres elles, un rollover se fait en suivant les contours de cette personne ou de cet objet et donne vers un lien ou affiche un texte ...

Merci de m'indiquer la méthode ( est-ce possible en css ? )

Merci d'avance pour votre aide !

bonsoir

Fr Smiley cligne
Modifié par frdiard (08 Mar 2009 - 01:37)
frdiard a écrit :
Up ! Personne ne peut m'aider ?

Si Si bien sur, mais tu sais ce genre de méthode représente du travail en javascript et en HTML ...

En plus il n'est pas 100% compatible, puisqu'il repose sur javascript Smiley eek

Je veux bien te rechercher ça dans mes armoires mais aprés il te faudra adapter
a ton cas ...
Donc d'ici ce matin .... Smiley confused
Bon le principe de découpage et lien, sur une image est comme ceci

<DIV>
    <MAP name=FPMap0>
    <AREA shape=RECT alt="Yann " coords=33,213,82,284 href="tr_yann.htm">
    <AREA shape=RECT alt="Oliv " coords=108,213,163,284 href="tr_oliv.htm">
    <AREA shape=RECT alt="Vince " coords=174,213,230,284 href="tr_vince.htm">
    <AREA shape=RECT alt="Gus " coords=242,213,307,284 href="tr_gus.htm">
    </MAP>
    <IMG src="http://www.fox-infographie.com/forum/groupe1.jpg" useMap=#FPMap0 border=0>
</DIV>


Donc ce code est la base élémentaire, tu as découpé l'image de telle façon que chaque gus, soit associé a un rectangle de l'image, mais on peut faire plus fin ou avec plusieurs rectangles par gus ou avec un polygone.
tu peux tester l'image est en place !

Ensuite au lieu de n'avoir qu'un lien et le alt qui s'affiche, il est facile avec un javascript de faire des bulles trés belles en HTML .... Smiley biggrin
Merci c'est déja un bon début pour moi, en fait j'avais déja vu ça sur le site d'un groupe de musique mais je n'arrive pas à remmettre la main dessus.
Modifié par frdiard (12 Mar 2009 - 02:03)
Je viens de tester ça avec dreamweaver et j'avoue que c'est génial ! Avec l'outil poligone on recréer le contour du personnage .J'aimerais juste savoir comment procéder à la création d'une bulle au passage de la souris ( si pas trop compliqué, qui suit la souris ) ?

Merci beaucoup !

Fr.

<html>
<head>
<script language="JavaScript" type="text/javascript">
//Si vous utilisez ce script, merci d avertir webmaster@toutjavascript.com 
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=10;
function AffBulle(texte) {
  contenu="<table border=0 cellspacing=0 cellpadding="+IB.NbPixel+"><tr bgcolor='"+IB.ColContour+"'><td><table border=0 cellpadding=2 cellspacing=0 bgcolor='"+IB.ColFond+"'><tr><td><font size='-1' face='arial' color='"+IB.ColTexte+"'>"+texte+"</font></td></tr></table></td></tr></table>";
  var finalPosX=posX-xOffset;
  if (finalPosX<0) finalPosX=0;
  if (document.layers) {
    document.layers["bulle"].document.write(contenu);
    document.layers["bulle"].document.close();
    document.layers["bulle"].top=posY+yOffset;
    document.layers["bulle"].left=finalPosX;
    document.layers["bulle"].visibility="show";}
  if (document.all) {
    bulle.innerHTML=contenu;
    document.all["bulle"].style.top=posY+yOffset;
    document.all["bulle"].style.left=finalPosX;
    document.all["bulle"].style.visibility="visible";
  }
  else if (document.getElementById) {
    document.getElementById("bulle").innerHTML=contenu;
    document.getElementById("bulle").style.top=posY+yOffset;
    document.getElementById("bulle").style.left=finalPosX;
    document.getElementById("bulle").style.visibility="visible";
  }
}
function getMousePos(e) {
  if (document.all) {
  posX=event.x+document.body.scrollLeft; 
  posY=event.y+document.body.scrollTop;
  }
  else {
  posX=e.pageX; 
  posY=e.pageY; 
  }
}
function HideBulle() {
	if (document.layers) {document.layers["bulle"].visibility="hide";}
	if (document.all) {document.all["bulle"].style.visibility="hidden";}
	else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
}

function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
	IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
	if (document.layers) {
		window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
		document.write("<LAYER name='bulle' top=0 left=0 visibility='hide'></LAYER>");
	}
	if (document.all) {
		document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
		document.onmousemove=getMousePos;
	}
 	else if (document.getElementById) {
	        document.onmousemove=getMousePos;
	        document.write("<DIV id='bulle' style='position:absolute;top:0;left:0;visibility:hidden'></DIV>");
	}

}

</script>
</head>

<body bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066" >
<font FACE="Arial" SIZE='-1' COLOR="#000099">
<script language="JavaScript">InitBulle("navy","#FFCC66","orange",1);
</script>
<A href="#" onMouseOver="AffBulle('Info bulle du premier lien')" onMouseOut="HideBulle()">Premier Lien ----------------------------------------------------</A><br />
<A href="#" onMouseOver="AffBulle('Ce script permet d\'afficher des infos bulles très <BIG>simplement</BIG>,<br /> sur <I>plusieurs</I> lignes,<br />avec des éléments HTML. ')" onMouseOut="HideBulle()">Deuxieme Lien</A><br />
<A href="#" onMouseOver="AffBulle('Autant d\'infos bulles que vous voulez ...')" onMouseOut="HideBulle()">Autre Lien</A>
<br /><br />
<br />Les liens sont inactifs </font></BODY></HTML>


Version trés ancienne mais qui marche et te servira de base !
Je te laisses adatper le tout !!
ce script élémentaire je l'avais récupéré sur un forum,
Smiley biggrin
Sujet clos
Aller à