|
|
|
|
Bonjour,
Je voudrais savoir comment fair pour qu'un cadre s'affiche au passage de ma sourie sur une image.
Je pense que c'est du javascript mais je suis débutant et j'arrive pas à le trouver sur la page ou je l'ai vu voila l'exemple :
- http://eq2players.station.sony.com/...
Au moment ou la sourie passe sur un des icones qui entourent le personnage ya un cadre noir avec des infos dedans.
Voila aussi l'adresse de mon site : http://vincentcueto268.free.fr/test3
Et la page dans laquelle je voudrais insérer le script : http://vincentcueto268.free.fr/test3/Lenain.htm
Merci d'avance :)
Configuration: Windows XP Firefox 2.0.0.7
Salut
|
SALUT
var toolTipHorizontalOffset=10;
var toolTipVerticalOffset=10;
// This function should be called by the mouse move event.
function moveToolTip(evt)
{
// Check to see if an event was passed
evt=(evt) ? evt: ((event) ? event : null);
if (!evt)
{
// window.alert("JavaScript Error: No event was passed to moveToolTip(evt).");
return false;
}
// Find the scrollbar positions
scrollLeft=(document.body.scrollLeft) ? document.body.scrollLeft : document.documentElement.scrollLeft;
scrollTop=(document.body.scrollTop) ? document.body.scrollTop: document.documentElement.scrollTop;
// Find the window dimensions
bodyWidth=document.body.offsetWidth;
bodyHeight=document.body.offsetHeight;
//window.status=""+bodyWidth+", "+bodyHeight;
// Check that the object can actually be found.
if (!document.getElementById("ToolTip"))
{
// window.alert("JavaScript Error: Could not find ToolTip object in moveToolTip(evt).");
return false;
}
// Get the X and Y co-ordinates of the event
if (evt.pageX) // Firefox and Mozilla
{
baseX=evt.pageX;
baseY=evt.pageY;
}
else if (evt.clientX) // IE
{
baseX=evt.clientX+scrollLeft;
baseY=evt.clientY+scrollTop;
}
else
{
return false;
}
// Align the tooltip off to the top, bottom, left and right depending on where it is on the page.
x=baseX+toolTipHorizontalOffset;
y=baseY+toolTipVerticalOffset;
if (baseX+document.getElementById("ToolTip").offsetWidth+toolTipHorizontalOffset>bodyWidth)
{
x=baseX-document.getElementById("ToolTip").offsetWidth-toolTipHorizontalOffset;
}
if (baseY+document.getElementById("ToolTip").offsetHeight+toolTipVerticalOffset>bodyHeight)
{
y=baseY-document.getElementById("ToolTip").offsetHeight-toolTipVerticalOffset;
}
// Make sure they can never disappear off the top or left edges
if (x<=2) { x=baseX+toolTipHorizontalOffset; }
if (y<=2) { y=baseY+toolTipVerticalOffset; }
if (x<=2) { x=2; }
if (y<=2) { y=2; }
// Set the new X and Y position for the tooltip
document.getElementById("ToolTip").style.left=""+x+"px";
document.getElementById("ToolTip").style.top=""+y+"px";
}
function setToolTipVisibility(newVisibility)
{
// Check that the object can actually be found.
if (!document.getElementById("ToolTip"))
{
// window.alert("JavaScript Error: Could not find ToolTip object in setToolTipVisibility(newVisibility).");
return false;
}
// Set its visibility
document.getElementById("ToolTip").style.visibility=newVisibility;
if(newVisibility == "visible")
{
document.getElementById("ToolTip").style.display="inline";
} else {
document.getElementById("ToolTip").style.display="none";
}
}
function setToolTipInnerHTML(newInnerHTML)
{
// Check that the object can actually be found.
if (!document.getElementById("ToolTip"))
{
// window.alert("JavaScript Error: Could not find ToolTip object in setToolTipVisibility(newInnerHTML).");
return false;
}
// Set its innerHTML if it isn't already set to that value
if (document.getElementById("ToolTip").innerHTML!=newInnerHTML)
{
document.getElementById("ToolTip").innerHTML=newInnerHTML;
}
}
function showToolTip(newInnerHTML)
{
setToolTipInnerHTML(newInnerHTML);
setToolTipVisibility("visible");
}
function hideToolTip()
{
setToolTipVisibility("hidden");
}
function initToolTip()
{
if (document.all)
{
document.onmousemove=moveToolTip;
}
else
{
window.addEventListener("mousemove", moveToolTip, false);
}
}
ensuite tu insert le lien vers ce js dans les <head> de ta page <script language="javascript" src="tooltip.js"></script> et sur les element ou tu veux que le tooltip apparaisse Exemple comme sur le site avec une image <script language="javascript" type="text/javascript">
itemDesc[0]="";
itemDesc[0]+="<table style='color:#FFFFFF' cellspacing=0 cellpadding=0>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td><span class='itemTitle'>The Twin Calamities</span><br>";
itemDesc[0]+="<br>";
itemDesc[0]+="</td>";
itemDesc[0]+="<td><img src='/images/Icons/icon_item_1671.jpg' hspace='5'></td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan=2>";
itemDesc[0]+="<font color='#FFFF00'>Découvert par</font><br>";
itemDesc[0]+="Crabbok<br>";
itemDesc[0]+="Ethereal Legacy<br>";
itemDesc[0]+="The Bazaar<br>";
itemDesc[0]+="5 mars 2006</span> <br>";
itemDesc[0]+="<br>";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="FABLED";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="<span style='text-transform:uppercase'><font color='#eaea88'><strong>";
itemDesc[0]+="Histoire ";
itemDesc[0]+="Inéchangeable ";
itemDesc[0]+="</strong></font></span><br>";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="<span style='text-transform:capitalize'><font color='green'><strong>+26</strong></font></span> <span style='text-transform:capitalize'><font color='green'><strong>Force</strong></font></span><br>";
itemDesc[0]+="<span style='text-transform:capitalize'><font color='green'><strong>+25</strong></font></span> <span style='text-transform:capitalize'><font color='green'><strong>Agilité</strong></font></span><br>";
itemDesc[0]+="<span style='text-transform:capitalize'><font color='green'><strong>+26</strong></font></span> <span style='text-transform:capitalize'><font color='green'><strong>Résistance</strong></font></span><br>";
itemDesc[0]+="<span style='text-transform:capitalize'><font color='green'><strong>+60</strong></font></span> <span style='text-transform:capitalize'><font color='green'><strong>Mana</strong></font></span><br>";
itemDesc[0]+="<span style='text-transform:capitalize'><font color='green'><strong>+90</strong></font></span> <span style='text-transform:capitalize'><font color='green'><strong>Santé</strong></font></span><br>";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="<font color='#7ed7df'><strong>Unleash Calamity</strong> </font> <br>";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="Dual Wield Pierce <br>";
itemDesc[0]+="<strong>Dégâts:</strong> 22 - 66 ( 55,02 Classement) <br>";
itemDesc[0]+="<strong>Délai:</strong> 1.6";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="<strong>Poids:</strong> 1 <br>";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="<strong>Cases:</strong> ";
itemDesc[0]+="Primary";
itemDesc[0]+=", ";
itemDesc[0]+="Secondary";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="<strong>Niveau:</strong> 68 <br>";
itemDesc[0]+="<strong>Moine</strong>";
itemDesc[0]+=", ";
itemDesc[0]+="<strong>Malabar</strong>";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
itemDesc[0]+="<strong>Effets:</strong><br>";
itemDesc[0]+='';
itemDesc[0]+=" Applique Unleash Calamity quand Equipped <br>";
itemDesc[0]+='<img src=\"/images/invis.gif\" width=\"20\">';
itemDesc[0]+=" Sur une attaque réussie this spell has a 5% chance to cast Ruinous Strike on target of attack. <br>";
itemDesc[0]+='<img src=\"/images/invis.gif\" width=\"20\"><img src=\"/images/invis.gif\" width=\"20\">';
itemDesc[0]+=" Inflige 5 - 8 de dégâts magie sur Cible <br>";
itemDesc[0]+='<img src=\"/images/invis.gif\" width=\"20\"><img src=\"/images/invis.gif\" width=\"20\">';
itemDesc[0]+=" Decreases Mitigation of Cible vs piercing damage by 36 <br>";
itemDesc[0]+="</td>";
itemDesc[0]+="</tr>";
itemDesc[0]+="</table>";
</script>
<a href="url de ta page cible" onMouseOver="showToolTip(itemDesc[0]);" onMouseOut="hideToolTip();" style="cursor:default ;"><img src="url de ton image.jpg" width="42" height="42" border="0" class="itembox"></a>
</td>
les images liens et texte du js embarque ci dessus sont ceux du site a toi de faire tes commentaires, le style , les couleurs ..........ect ect RAD ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣ |
Url = adresse de ton image , donc soit le chemin d'accés c:monsite/images/fond.jpg
|
SI mais est tu sur de bien piger ce que tu fais ?? :-))
<a href="l adresse de la page qui apparaitra quand on click sur l image boutton " onMouseOver="showToolTip(itemDesc[0]);" onMouseOut="hideToolTip();" style="cursor:default ;"><img src="l image que l on vois et qui sert de boutton" width="42" height="42" border="0" class="itembox"></a> RAD ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣ |
Voila alors j'ai placé le script en premier pour le moment parce que je voulais pas me compliquer la vie d'avantage je c'est pas si c'est intelligent de ma part mais bon ;) lol
|
J'ai regardé un peu le css et j'ai trouvé ca mais comme jsuis débutant j'ai rien compris lol :) ca a un rapport avec ce dont j'ai besoin ?
|
SALUT Pitch@n
|
Afficher favoris google chrome Afficher le mot de passe de ma connexion wifi Afficher mots de passe windows7 Agrandir une image au passage de la souris C'est quoi le mot de passe winrar Changer mot de passe msn Comment trouver un mot de passe msn Impossible d'afficher ma cam sur msn Mettre image sur texte passage souris Mot de passe administrateur Mot de passe bios Mot de passe msn perdu Mot de passe neuf box Passerelle par defaut Pilote d'affichage atikmdag nero Piratage pass facebook Pirater mot de passe msn gratuit Que faire pour passer une affiche d'un loto
