1. Accueil
  2. Question et réponse
  3. <HTML> L'image survolée en miniature n'apparaît que dans la partie gauche de l'écran.

<HTML> L'image survolée en miniature n'apparaît que dans la partie gauche de l'écran.

2013-02-28 2 views
4

J'apprends à concevoir un site Web à l'aide de Dreamweaver CS6. Je voulais faire une galerie photo avec les vignettes sur la page, mais lorsque vous passez la souris dessus, elle affiche l'image en taille réelle sur la gauche et un peu en dessous de la vignette. Voici ce que j'ai trouvé en cherchant sur le Web (il a probablement été trouvé ici, mais je ne me souviens pas qui a posté, donc si vous l'avez posté, tout le mérite vous revient).<HTML> L'image survolée en miniature n'apparaît que dans la partie gauche de l'écran.

j'ai eu dans mon code HTML:

<table> 
    <tr> 
    <td> 
     <a class="thumbnail" href="#thumb"> 
      <img src="productURL" width="100px" height="142px" border="0" /> 
      <span> 
       <img src="productURL" /> 
       <br /> 
       <font face="arial">productname 
       </span></a> 
      </font> 
    </td> 
    <td> 
     <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span> 
     <img src="productURL" /><br /><font face="arial"> 
     productname</span></a></font> 
    </td> 
    <td> 
     <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span> 
     <img src="productURL" /><br /><font face="arial"> 
     productname</span></a></font> 
    </td> 
    <td> 
     <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span> 
     <img src="productURL" /><br /><font face="arial"> 
     productname</span></a></font> 
    </td> 
    </tr> 
    <table>

Et puis sur mon CSS:

.thumbnail{  
position: relative;  
z-index: 0;  
} 

.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
} 

.thumbnail span{  
position: absolute;  
background-color: lightyellow;  
padding: 5px;  
left: 1000px;  
border: 1px dashed gray;  
visibility: hidden;  
color: black;  
text-decoration: none;  
} 

.thumbnail span img{  
border-width: 0;  
padding: 2px;  
} 

.thumbnail:hover span {  
visibility: visible;  
top: 300px;  
left: 107px; 
}

Je pensais que c'était un assez bon code, je ne peux cependant pas comprendre comment pour faire apparaître l'image juste à côté de la vignette. J'ai essayé de créer une "sous-classe" appelée "span_2" mais elle n'est pas sortie correctement et a foiré toute la page. Je pense que c'est une grande question, mais j'ai besoin d'aide. J'ai commencé à jouer avec HTML cette semaine ...

EDIT

Y at-il une fonction où je peux choisir l'emplacement de la vignette et définir l'image à afficher juste à côté?

Source

2013-02-28 Pedro

+1

Vous devriez vérifier votre HTML - vous eu beaucoup de tags mal fermés. Le '-tag' 'est également déprécié. – insertusernamehere

+0

Exactement. J'ai formaté votre premier extrait pour le rendre plus clair. '', '' et '' sont totalement tordus –

+0

@insertusernameici merci pour l'aide avec le code et pour la formation :) – Pedro

Répondre

4

Je fais un nouveau code valide pour votre site web: http://jsfiddle.net/sMLbP/4/

Il y a HTML:

<div class="container_image"> 
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> 
    <div class="image"> 
     <img src="productURL" /> 
     <span style="font-family:arial"> productname</span> 
    </div> 
</div> 
<div class="container_image"> 
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> 
    <div class="image"> 
     <img src="productURL" /> 
     <span style="font-family:arial"> productname</span> 
    </div> 
</div> 
<div class="container_image"> 
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> 
    <div class="image"> 
     <img src="productURL" /> 
     <span style="font-family:arial"> productname</span> 
    </div> 
</div> 
<div class="container_image"> 
    <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> 
    <div class="image"> 
     <img src="productURL" /> 
     <span style="font-family:arial"> productname</span> 
    </div> 
</div>

[MISE À JOUR] Il est CSS:

.container_image { 
    float:left; 
    position:relative; 
    margin-right:20px; 
} 

.container_image:hover{ 
    cursor:pointer; 
} 

.container_image .image { 
    position: absolute !important ; 
    background-color: lightyellow; 
    border: 1px dashed gray; 
    top: -1000px !important ; 
    z-index:10 !important ; 
} 

.container_image:hover .image { 
    left: 100px !important ; 
    top:0px !important ; 
}

Source

2013-02-28 13:38:04

+0

Cela ne marche toujours pas pour moi. L'image qui ressort est toujours alignée en haut de la page. Peut-être est-ce quelque chose à faire avec le reste de mon code? – Pedro

+0

Quel navigateur et quelle version avez-vous utilisé, quel est le code que je vous ai fourni? –

+0

Je mets à jour mon code CSS, remplace le vôtre et actualise le cache avec CTRL + R. –

1

Vous pensez dans la bonne direction avec l'élément span.

Regardez dans display:block; il fait des éléments de la page comme comportent un élément de bloc (par exemple div)

également en largeur et la hauteur d'une image que vous n'utilisez habituellement pas d'unités.

Aller aux ressources en ligne comme ceci: http://www.w3schools.com/html/default.asp

pour apprendre quelques notions de base du langage HTML.

Source

2013-02-28 13:03:18

+0

Où devrais-je mettre le ' affichage: bloc; '? Je suis assez nouveau dans le langage HTML. En outre, en ce qui concerne l'utilisation des unités, c'est juste un habbit. J'ai eu des problèmes en n'utilisant pas d'unités pendant les tests de tanking dans High Scholl hahaha – Pedro

+0

vous ajoutez la propriété d'affichage à la plage et l'étiquette ... pour qu'ils se comportent comme vous le souhaitez sur la page ... lisez ici: http : //www.w3schools.com/cssref/pr_class_display.asp w3schools est un excellent moyen de commencer à apprendre le html. –

+0

@MartinTurjak Vous devriez lire cet article sur les références W3Schools: http://w3fools.com/ –

Questions connexes

 Questions connexes