outil de pointe pop up de texte lors du survol d'une image?
liens doivent être cadratin (1 em sans-serif avec un rembourrage de 5 et de 10 pixels et les marges d'0 0 1 pixels
(astuce: utiliser d'abréviation propriétés); la partie droite de la bordure doit être de 5 pixels et la couleur #ff1828
b. lorsque l'utilisateur survole un lien, la partie droite de la bordure doit être double de style avec 5 pixels en blanc
c. Au démarrage, il devrait y avoir aucun affichage de texte en dessous de l'une des trois images de pâtes; utiliser les balises de contrôle de l'affichage de la pop-up de texte sur le vol stationnaire; la position du bloc de texte absolue avec une marge supérieure de 220 pixels et de la marge de gauche de 550 pixels; la largeur du bloc doit être de 180 pixels au minimum, selon la quantité de texte que vous trouvez dans votre recherche; l'utilisation de rembourrage de 5 pixels et des marges de 10 pixels; le texte doit être écrit en blanc sur un fond noir.
J'ai tout essayé et c'est ce que j'ai jusqu'à présent et rien ne fonctionne. Je ne suis pas tout à fait sûr de ce que je fais mal? Si quelqu'un pouvait aider je le ferais sûrement apprécier. voici mon code pour l'instant:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 7-3</title
<style type="text/css">
<!--
#links {font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px color: #ff1828}
div.links:hover {border-right: double 5px; color:white}
<span>
div#sizes a:hover img.large {position: absolute; top: 220px; left: 550px;
width: 180px; border:none; padding: 5px; margin: 10px
background-color: #000000; color: #ffffff}
</span>
-->
</style>
</head>
<body>
<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" />
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p>
<div id="links" "demo">
<table style="text-align: center">
<tr>
<td>
<a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine" title="Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron"/>
</td>
<td>
<a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" title=" Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium" />
</td>
<td>
<a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" title=" Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium" />
</td>
</td>
</table>
</div>
</body>
</html>
Vous devez vous connecter pour publier un commentaire.
Avez-vous essayé d'utiliser
<img src='' title='popup' />
?Il a été un long temps depuis que cette question a été posée, mais pour le bénéfice de personnes dans le futur Googler cette question, une autre solution possible serait l'utilisation de Twitter Bootstrap CSS plate-forme. Voir ici: http://getbootstrap.com/javascript/#popovers
Vous devez implémenter JQuery ainsi que les fichiers CSS, mais qui peuvent être obtenus assez facilement par l'ajout de 2 lignes de code (voir la section mise en route à la tête de fichier)
Votre balise de titre n'est pas fermé :p
Aussi, je ne vois aucune référence à votre à votre div ou img classes autres que la
Essayer
ou
qui sera votre balise img ou sélecteur sélecteur de classe pour la balise img, respectivement.
.className désigne le nom de la classe à un élément où ce dernier fait référence à l'attribut title de l'élément.
Donc essayer cela, et je n'ai pas testé ce ne peut donc pas être sûr du résultat mais j'espère que sa utile:
au lieu de:
remplacer par:
Meilleur de la chance.
(Utilisation de CSS que l'expérience, la w3schools comme ref)