Affichage page web lors d'un survole de souris

22 juil. 2008, 11:48

Bonjour à tous,

Je suis sur une page web qui fait un recap dans ma base de donnée.

Est-il possible lors d'un passage de souris sur un mot ou image qu'une sorte d'infobulle s'ouvre avec un l'intérieur une page web( qui récupère id en question sur la page principale).

J'ai deja vu des exemples sur internet sur le survole de la souris pour afficher du texte classique. Mais est-il possible d'avoir au survole une page web

Merci d'avance

guigui69

22 juil. 2008, 12:58

Utilise Javascript.

L'événement onMouseOver détecte le passage de la souris sur un objet HTML. S'il s'agit d'un mot dans un tas tu peux utiliser un lien hypertexte <a></a> ou alors un bloc délimité par <span></span>

Voici un exemple pour appliquer l'événement onMouseOver :

Code : Tout sélectionner

<p>Ce texte contient un <span  onMouseOver="alert(this.innerHTML);">mot</span> spécial</p>

<style>
span {background:silver; font-weight:bold; color:white; cursor:pointer;}
</style>

Dans cet exemple, le <span> contient le texte : "mot" et que l'événement onMouseOver déclenchera l'exécution du code javascript "alert(this.innerHTML);" quand la souris sera sur le texte délimité.

Le code javascipt fait une alert() qui est une boite de message qui affiche le contenu de la balise en cours. Ce qui est exprimé par le code "this.innerHTML"

Voilà un début de solution tu pourras adapter à ton cas et étudié plutard comment afficher comme tu le souhaite. pour info, l'info-bulle peut être un simple <iframe> qui lui peut afficher une page web et qui peut jouer cache-cache dans ta page.

22 juil. 2008, 13:45

D'accord j'ai compris le fonctionnement,

Peut-on mette visualiser une page web lorsque l'on est en survole sur le mot en question? (en faite le texte qui s'affiche lorsque l'on survole serait une page web.)

Merci

guigiu69

22 juil. 2008, 14:54

Oui comme te le disait Sadeq:

[...] l'info-bulle peut être un simple <iframe> qui lui peut afficher une page web et qui peut jouer cache-cache dans ta page.
.

sur l'événement tu peut lancer la fonction JS de ton choix, donc remplir un <iframe> ou ouvrir un popup si tu veut apres ca dépend ce que tu entend par afficher une page web (Si tu veut ton affichage "dans" la page ou tu fait ton survol c'est un <iframe> :http://www.highdots.com/css-editor/html ... frame.html).

23 juil. 2008, 09:31

D'accord je suis entrain de tester quelque chose mais il me manque un élément.

J'appel le Onmouseover= visu($variablephp);

dans ma partie javascript

j'ai donc visu(XXXX), (XXXX valeur récupérer du mouseover) comment récupérer la valeur qui est entre parenthèse?

Merci

guigui69

23 juil. 2008, 09:55

je suis pas sur de comprendre mais je vais essayer par un exemple. Le nom que tu donnes entre les parentheses de la fonction te permettent de récupérer la valeur de la variable :

Code : Tout sélectionner

<script type="text/javascript">
function ma_fonction(nom_variable)
{
	alert(''+nom_variable);
}
</script>

on déclare la fonction que l'on appelle avant

Code : Tout sélectionner

<?php 
$valeur = "Au secours !";
?>
<script type="text/javascript">
ma_fonction("<?php echo $valeur;?>");
</script>

On l'appelle avec la valeur "Au secours !" et cela affichera "Au secours !"...

24 juil. 2008, 09:03

Est-ce que dans l'info-bulle, tu souhaites afficher l'URL (l'adresse) de la page web en question, ou le contenu de la page web ?

Il faut éviter d'utiliser la balise iframe, car elle n'est pas une recommendation du w3c, et en plus, l'affichage des iframes peut-être non-autorisée dans le paramétrage des navigateurs.

Utilise plutôt une balise DIV, que tu renseigneras par son attribut innerHTML en javascript.

par exemple, la balise :

Code : Tout sélectionner

<div id="moninfo"> </div>

remplie par javascript :

Code : Tout sélectionner

function showInfo(divID){

     document.getElementById("moninfo").innerHTML="Ceci est le texte de mon info-bulle";

}

Zecreator.[/code]

Affichage page web lors d'un survole de souris

Qui est en ligne