Code XHTML :
<div class="zoom">
<p><a href="#" title="récolte de ceps"></a></p>
</div>
Code CSS :
.zoom {
width:420px;
height: 400px;
background: url(champignons3.jpg) no-repeat;
margin: 0 auto;
}
.zoom p, .zoom a {
height: 400px;
display: block;
margin:0
}
.zoom a:hover {
background: url(champignons3.jpg) no-repeat 0 -400px;
cursor:help;
}
Zoomer une image
Maintenant, nous allons utiliser l'infobulle pour faire un zoom avec une image faite dans PSP mais on pourrait se contenter de texte seulement.
J'ai pris une image de 300 x 400 que j'ai travaillé dans PSP. Vous pouvez mettre la dimension que vous voulez, à vous de refaire vos petits calculs.
Nous allons pouvoir zoomer cette image avec tous les navigateurs affichant des images : IE6, IE7, FF , Opera.et peut-être le IE8 que je n'ai pas pu texter. Ce n'est pas beau tout cela ? J'ai bien bagarré pour y arriver !Car IE6 bugge alors que tous les autres sont sympas. Ce n'est pas la première fois!
L'image a une taille définitive de 400 x 800px , je l'ai appelée champignons3.jpg (vous pouvez voir Icil'exemple sur un fond blanc:-))
Fenêtre/dupliquer l'image de 300 X400. Redimensionner l'image dupliquée à 60%.Un petit coup de Réglages/Netteté.Revenir sur la première image de 300 x 400, augmentez la taille du support en 300 x 800 avec l'excédent de support en haut :
Copier la petite image redimensionnée à 60% et coller la comme un nouveau calque dans la grande image.
Déplacer la petite image dans le coin haut/gauche. Enregistrer en jpg en la compressant avec doigté et placer cette image de 400 x 800 dans le dossier adéquoit de votre site.
C'est tout !
Maintenant les codes :
Les avantages de cette méthode sont les suivants :
1) tous les navigateurs sont contents !
2) pas de scripts, rien que des CSS. C'est-y pas beau, je vous l'avais dit !
J'espère vous avoir bien amusés pour ma part, cela a demandé quelques jours d'expériences et de recherches sur le web.
Source
J'espère que vous vous amuserez autant que moi avec ce tutoriel qui pourra être classé dans la rubrique HTML
Fait le 16 juillet 2009 pour devoir de fin d'année 2008-2009 par Danyelle modifié le 7 septembre 2009
Les Infobulles sans javascript
Vous pouvez voir d'autres exemples ICI
Généralités
Avec l'attribut alt qui est appliqué à la balise img, une petite info-bulle apparait au passage de la souris sur l'image et s'en va quand la souris sort de l'image.( FF ne reconnait pas cet attribut)Une informations sur l'image peut être donnée de cette manière
L'attribut title appliqué à une balise img mais aussi à d'autres balises dont la balise a et la balise acronym ( permet aux synthétiseurs vocaux de lire une succession de lettres lettre par lettre (ex: DVD) est un attribut du xhtml qui est entre en fonction avec tous les navigateurs.
elle est placée comme ceci :
<p>cliquez <a href="accueil.html title="Ma page d'accueil">ICI</a>pour retourner à la page d'accueil</p>
cliquez ICI pour retourner à la page d'accueil
<p> <acronym title="Train à Grande Vitesse">TGV</acronym></p>. Passez la souris sur TGV ci-dessous :
TGV
Cela, nous savons tous le faire. mais l'info-bulle est de couleur jaune ( hihihi ! j'ai changé d'ordinateur, elle est blanche maintenant, bizarre... mais tant mieux !) avec un patit soulignement, pas original du tout. Il n'est pas possible de modifier l'apparence de cette balise title. Mais nous pouvons créer notre propre info-bulle qui apparaitra au survol d'une texte, d'une image.
Info-bulle personnelle
Pour donner une dimension nous pouvons utiliser l'unité em : c'est pour moi l'occasion de la découvrir...
L'unité em se rapporte à la taille de la police Avec elle on peut affecter une mesure relative à la taille de police de l'élément parent. Elle permet d'avoir des feuilles de style plus facilement adaptables d'un média à un autre. Les nombres décimaux sont autorisés, mais il faut tout simplement remplacer la virgule par un point. Cette valeur em est utilisable pour d'autres propriétés acceptant la mention de longueur.
Pour faire notre info-bulle, nous utiliserons la balise a et une balise span, incluse.
Code HTML :
<a class="mabulle" href="../../index.html">Mon super Site<span> Danybox est un site indescriptible semblable à tous les sites de graphisme qui prend sa source dans les profondeurs de l'inconscient de sa créatrice...</span></a>
en-dessous le résultat . Ce qui prouve bien que la balise span donne un texte inline c'est à dire sans retour à la ligne.
et l'info-bulle,me direz-vous ? elle vient doucement ..........;
C'est la class qui fait référence à la CSS qui va faire l'infobulle.
Vous avez bien compris que, pour commencer, vous voulez rendre invisible la balise span qui crée l'infobulle : certains auteurs utilisent display:none au lieu d'overflow: hidden.
a.mabulle span
{position : absolute;
top : -2000em;
left:-2000em;
width ; 600px;
height : 80px;
overflow : hidden;
background : #DDEEFF; /* important pour ne pas avoir la couleur par défaut */
border : 1px solid #6699ff;
}
notre lien :
a.mabulle {
position : relative; /* important pour que la bulle soit sous le texte*/
color : #000;
font-size : 1.2em;
text-decoration : none;
padding : 10px;
/* vous pouvez mettre un petit gif à côté du lien pour l'agrémenter*/
background : transparent url('bulle.gif')
no-repeat right center }
Maintenant, on va mettre le code pour afficher l'infobulle avec hover
a.mabulle :hover span{
top : auto;
left : auto;
width : 600 px;
overflow : visible;
}
on enlève le contour du lien :
a.mabulle: hover{
border: 0;
}
Eviter de recopier le texte ci-dessus, faites votre CSS avec Dreamveaver. En voulant copier j'ai perdu une matinée et je n'ai pas encore compris pourquoi !
Et voilla :Je vous préviens avec IE6 l'affichage de cette infobulle ne se fait pas...regardez maintenant ce tuto avec FF,cela marche
Bien, mais avec IE6 pas mis à jour depuis un moment, cela ne marche pas. C'est pourquoi j'ai trouvé une autre méthode.