2009-10-20 4 views
0

J'essaie d'accomplir quelque chose de très simple, et j'espère que quelqu'un peut me diriger dans la bonne direction sous la forme d'une bibliothèque javascript qui fera la plupart du travail pour moi. Lorsque l'utilisateur survole certains liens sur une page, je souhaite que le contenu de l'URL cible du lien soit chargé en tant que sous-fenêtre de style «info-bulle» au niveau du curseur de la souris.Un moyen rapide et facile d'ouvrir une URL en tant que sous-fenêtre sur mouseover en javascript?

Un exemple de fonctionnalité très similaire peut être trouvé sur this page si vous passez la souris sur l'un des noms d'éléments sous "Paquets d'hébergement de sites web de guilde". Le plus gros problème est que je ne peux pas contrôler la sortie ou le formatage des pages qui seront chargées en ligne (elles ne sont pas sous mon contrôle) sinon je servirais JSON et le ferais "correctement".

+0

Attendez une seconde; Est-il impossible de charger le contenu d'un hôte différent via Javascript? Je pense que mon idée pourrait être tirée alors. – OverloadUT

+0

Ce n'est pas impossible, mais plus difficile. Voir mon commentaire ci-dessous. –

Répondre

2

Utilisez ce jQuery tooltip plugin.

Il est facile à configurer, et il ne nécessite pas AJAX, iFrames ou toute autre bêtise alambiquée.

+0

Je crois que ma question initiale était peut-être floue. J'ai besoin du contenu réel de la page cible pour charger en tant que sous-fenêtre de style "info-bulle", pas seulement le texte de l'URL réelle. – OverloadUT

+0

A partir du plugin docs: "Pour afficher un contenu personnalisé dans l'infobulle, fournissez le callback bodyHandler dont la valeur de retour sera insérée dans l'info-bulle ..." Je ne sais pas si le callback peut bloquer pendant qu'il récupère le contenu, cependant ... j'ai eu des problèmes avec synax AJAX avant. – Kev

+0

Vous n'avez pas besoin d'utiliser AJAX. Vous pouvez extraire du contenu caché du DOM et similaire pour remplir l'info-bulle. Tout html est valide, donc vous pouvez devenir fou. –

0

Utilisez AJAX pour récupérer les données, puis:

var iframe = document.createElement('iframe'); 
iframe.innerHTML = ajax_response_html; 

Utilisez ensuite votre bibliothèque JavaScript favori pour positionner le iframe aux coordonnées disponibles dans les propriétés de l'objet événement mouseover, et le style de l'iframe pour être d'un fixe , plus petite taille.

+0

J'espérais trouver une bibliothèque ou un plugin pour jQuery ou quelque chose qui ferait exactement ce dont vous parlez, mais je l'accepterai si personne ne peut en fournir un. – OverloadUT

Questions connexes