Un cadre s'affiche au passage du la sourie Résolu/Fermé

Question

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/characters/character_profile.vm?characterId=390000302

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 :)

warlix · Answer

salut


Oui c est du javascript
Mais je ne pourrai te guider :p

Va voir à tout hasard sur le site de RAD , c est la caverne d' Ali Baba  la bas :p


http://radservebeer.free.fr/

Pitch@n · Answer

Merci pour ta réponse je vais voir la bas :)

Si quelqu'un d'autre veut m'aider aussi je suis preneur hihi ;)

RAD ZONE · Answer

SALUT loooool warlix c est un tooltip en js ! le voila et tu le sauvegarde en l apelant "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); } } ensuite tu insert le lien vers ce js dans les de ta page et sur les element ou tu veux que le tooltip apparaisse Exemple comme sur le site avec une image

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

Pitch@n · Answer

Cool merci pour ta réponse je vais essayer ca si ca marche tan mieu sinon je peut te recontacter ? 

Jsuis newbee on ne sais jamais

A bientot :)

Pitch@n · Answer

Salut ,

je sais pas quoi mettre dans le trou ou il est ecrit :
<a href="url de ta page cible" dans la derniere étape quelqun peut m'aider ? 

Merci d'avance

warlix · Answer

url = adresse de ton image , donc soit le chemin d'accés   c:monsite/images/fond.jpg
ou l adresse hyperlink : http://www.monimageamettre


en gros

Pitch@n · Answer

En faite le truc c'est que ca n'affiche aucun cadre je peut seulement cliquer sur le personnage 
ce qui me renvoit à une page cible c'est tout donc je comprend pas ce que je doit faire

Merci quand meme pour la derniere réponse :)

Pitch@n · Answer

Personne ne peut m'aider ?

RAD ZONE · Answer

SI mais est tu sur de bien piger ce que tu fais ?? :-))

RAD

Pitch@n · Answer

Ben effectivement c'est ca que je comprend pas

Je pense avoir compris <a href="l adresse de la page qui  apparaitra quand on click sur l image boutton " 
Mais pas                        <img src="l image que l on vois et qui sert de boutton"

Chez moi rien ne s'affiche quand je passe la sourie

Pitch@n · Answer

Encore dsl pour mon newbeesme j'essaye d'apprendre mais c'est pas gagné lol :)

RAD ZONE · Answer

mets le code complet de ta page ou un lien que je vois !

Pitch@n · Answer

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 Je voudrai que le script fonctionne sur mes image de nains ! :) Voila la bête : LaHordeNaine

OPTIONS DE CARRIERE

Brisefer

Votre objectif en tant que Brisefer est de vous imposer entre vos amis et vos ennemis et utiliser vos capacites de defense pour encaisser et devier les attaques.
Si vous ne pouvez pas attirer immediatement la cible ennemi,
vos bonus de vengeance vont augmenter de maniere claire aux yeux de cette cible
tandis que votre capacite a defendre vos allies va devenir de plus en plus puissante.
Il est evident que les Brisefers brillent en groupe mais ils ne sont pas en reste quand ils sont seuls pourvu que la cible ennemi se tienne a portee de hache ou de marteau.

Martelier

En matiere d armes contondantes lourdes, la taille compte bel et bien et c est ce qui guide les Nains Marteliers dans leur choix. Leur role est de frapper les objets avec force, et c est dans cette optique que, en nains dignes de ce nom, ils utilisent le meilleur outil : le gros marteau. Brandissant fermement leur arme au combat,
les Marteliers ont fait plus d un mort sur le champ de bataille et de moins en moins de combattants esperent pouvoir un jour atteindre un niveau de competence, de hargne et de rapidite egal. Ils sont cependant moins proteges que les Nains Brisefer mais cette faiblesse est largement compensee par leur puissance.

Ingenieur

L'explosion est la forme ultime d'avantage mecanique
et il n'est pas surprenant que cette competence soit reservee a l'ingenieur nain.
Utilisant fusils et grenades, c'est un combattant d une puissance inegalee a longue portee. Vous n'avez aucune chance de l'approcher sans subir d'enormes degats.
Il n'a pas son pareil pour se battre contre plusieurs adversaires a la fois, ses explosifs lui permettant de toucher et d exterminer les ennemis qui restent trop groupes. L'ingenieur offre une puissance d attaque phenomenale et incroyablement flexible, ce qui fait de lui un combattant intelligent et redoutable.

Pretre des runes

Les nains n'aiment pas vraiment la magie. Comme pour bon nombre d'autres choses utilisees par les humains et leurs allies. Pour les runes, c'est une tout autre histoire. Elles possedent un ancien pouvoir, et leur creation consiste en un rituel si raffine que les resultats sont incroyables. Les gardiens de cet art sont les pretres des runes, des sages qui consacrent leur vie entiere a l'apprentissage des runes. Leur technique artisanal leur permet de creer des effets d'une puissance colossale et de combattre leurs adversaires avec toute la force de la terre elle-meme. De plus, ils peuvent renforcer les pouvoirs de leurs allies et guerir leurs blessures.

RAD ZONE · Answer

SALUT 

OUI IL MANQUE un CSS je regarde ca plus tard !!

Pitch@n · Answer

Prend ton temp c'est pas préssé mais merci beaucoup pour ton aide c'est super sympa :)

A bientot RAD

Pitch@n · Answer

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 ?

.itembox {
border : 1px solid #988259;
padding : 1px;
}

.spellbox {
border : 1px solid #988259;
padding : 1px;
}

div.tooltip {
position : absolute;
left : 200px;
top : 400px;
width : 200px;
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;
}
div.tooltip2 {
position : absolute;
left : 200px;
top : 400px;
width : 200px;
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;
}

RAD ZONE · Answer

OUI  mais il y as  autre chose je te fais un exemple !! mais leur code est tres embrouille et sans nom aproprie !!!

 il faut nettoyer alors c est long je te donnerais le resultat quand  ce seras finis !!

RAD

Pitch@n · Answer

Merci beaucoup RAD c 'est super sympa :)

RAD ZONE · Answer

SALUT Pitch@n

  voila ce que je t ai fais !!
effet pour la horde naine

 j ai integre tout sur ta page actuel ! j ai rajoute les css pour la tooltip dans ton css 

 tu na plus qua changer les  textes des description dans la tooltip (j ai change les images ,mais j avais la fleme de changer les textes :-))
 et faire tes modifs
les fichiers complet 

 si tu as besoin d aide  !! demande  ;-))

RAD

Pitch@n · Answer

Merci encore t'es genial je vais voir tous ca :)

Pitch@n · Answer

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

max.02 · Answer

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

Pitch@n · Answer

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 Et enfin ouf c'est presque fini :) dans tu met ce code :

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 :

max.02 · Answer

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

Pitch@n · Answer

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

Un cadre s'affiche au passage du la sourie

25 réponses

Discussions similaires