Un cadre s'affiche au passage du la sourie - Page 2

Et voila j'ai tout changé et je l'ai adapté à mon site merci beaucoup :) grace à toi j'ai bien avancé dans ce que je voulais fair ;)

T'as qu'a voir ce que ca donne situ as deux secondes dans la partie Lenain du site :

http://vincentcueto268.free.fr/test3/

Merci encore je te demanderais d'autres trucs bientot je pense ;)

j'aimerais faire exactement la meme chose , perso c 'est une carte de france ou le fait de passer sur une ville avec la souris declanchera une image en jpg
ex: pour la ville de lens , une image et du texte idem pour la ville de bordeaux
j'ai posté un sujet de discution
je suis totalement noob de chez noob je debute
je suis bien arrriver à mettre ma carte en fond de plan avec des coordonnées x et y , je suis arrivé a definir les coordonnees des villes mais je suis obligé de cliquer sur la ville et cela m'envoit sur une autre page .

merci de votre aide

Salut :)

Essaye ca :

Dans la feuille de style css tu met ca :

.itembox {
border: 1px solid #988259;
padding: 1px;
margin-right: 10px;
cursor: url(http://vincentcueto268.free.fr/LHN/Mechnesium/Mch_norm.cur), default;
}
div.tooltip {
position: absolute;
left: 35%;
top: 80%;
width: 250px;

margin-left: -100px;
border: 1px solid #EAD172;
padding: 2px;
color: white;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
text-transform: capitalize;
}

.Class {
display: block;
}
.itemTitle {
font-size: 16px;
font-weight: bold;
text-transform: capitalize;
color: #ffffff;
}
STRONG {
font-weight: bold;
}

puis dans un fichier js que tu nomme tooltip.js :

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);
}

}

la page ou ya ta carte : Dans la balise <head></head>

<script language="javascript" src="tooltip.js" type="text/javascript"></script>

Et enfin ouf c'est presque fini :) dans <body></body> tu met ce code :

<div class="itembox">
<script language="javascript" type="text/javascript">
//<![CDATA[
var itemDesc=new Array();
//]]>
</script>
<script language="javascript" type="text/javascript">
//<![CDATA[
itemDesc[0]="";
itemDesc[0]+="<table style='color:#FFFFFF' cellspacing=0 cellpadding=0>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td><span class='itemTitle'>Le nom de la ville<\/span><br>";
itemDesc[0]+="<br>";
itemDesc[0]+="<\/td>";
itemDesc[0]+="<td><img src='le lien de la photo' hspace='5'><\/td>";
itemDesc[0]+="<\/tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan=2>";

//t'ecris ce que tu veux la ou j'ai ecris ici //
itemDesc[0]+="<font color='#FFFF00'> ici <\/font><br>";
itemDesc[0]+="<br>";
itemDesc[0]+="<\/td>";
itemDesc[0]+="<\/tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";
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]+="<\/strong><\/font><\/span><br>";
itemDesc[0]+="<\/td>";
itemDesc[0]+="<\/tr>";
itemDesc[0]+="<tr>";
itemDesc[0]+="<td colspan='2'>";

//pour un texte en couleur//
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>";

//un commentaire//
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]+="<\/td>";
itemDesc[0]+="<\/tr>";
itemDesc[0]+="<\/table>";
//]]>
</script>
<a href="un lien" onmouseover="showToolTip(itemDesc[0]);" onmouseout="hideToolTip();" style=" cursor:default ;">
<img src="lien de l'image" width="42" height="42" border="0" class="itembox" /></a>

</div>

Voila pour les dernieres precisions tu personnalise ca comme tu veux :) et si tu veux mettre un affichage par ville tu devras repeter la troisieme etapes autant de foix qu'il y as de ville en remplacant le 0 par 1 puis 2 puis 3 etc comme dans cette exemple :

<div class="itembox">
<script language="javascript" type="text/javascript">
//<![CDATA[
var itemDesc=new Array();
//]]>
</script>
<script language="javascript" type="text/javascript">
//<![CDATA[
itemDesc[1]="";
itemDesc[1]+="<table style='color:#FFFFFF' cellspacing=0 cellpadding=0>";
itemDesc[1]+="<tr>";
itemDesc[1]+="<td><span class='itemTitle'>Le nom de la ville<\/span><br>";
...

J'ai juste remplace 0 par 1 oubli pas de changer les liens ou images :) et tu devras regler toi meme la taille de l'image aussi.

Vala jespere que c'est assez clair :) tchao !!

Amuse toi bien

ouais bon , rire .... t'es sympa comme garcon et moi qui ne savait ce que j' allais faire de mon week end !!!

merci je vais essayer

A ton service lol :)

Dis toi que je debute depuis (j'ai commencé ya 2mois et jy suis passé aussi lol :) c'est du boulo mais c'est efficace et ca tapprend pas mal de trucs :)