Sujet Précédent Sujet Suivant

DIV par dessus d'une image

Résolu/Fermé
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 4 oct. 2009 à 02:43
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 - 10 oct. 2009 à 18:23
Bonjour,

J'ai une page avec les miniatures. Je souhaite qu'au passage de la souris sur la miniature, un "cadre" (div) noir, semi transparent soit affiché par dessus de la miniature.
Comme sous windows, dans un dossier avec les images, affichage "miniatures", quand on sélectionne une image, celle-ci s'entoure d'un cadre (couleur bleu de windows si par défaut). Moi j'aimerais avoir à peu près le même effet mais au survol de mes miniatures sur ma page web.

J'ai creusé un peu dans ce sens là: 
#container1{ //je garde dedans les miniatures
	width: 600px;
	text-align: center;
}

.over:hover { //class pour les images
	width: 125px;
	height: 125px;
	top: 2px;
	position: relative;
	background-color: #000000;
	z-index: 1;
	filter: alpha(opacity=50);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	opacity:0.5;
}
.over {
	width: 120px;
	height: 120px;
	border-color: #405190;
	border-width: 2px;
	background-color:#000000;
	z-index: 10;
}
/*-------------------------------*/
<div id="container1"><a href="images/image1.png" target="_blank"><img src="images/image1min.png" width="120" height="120" hspace="5" vspace="5" class="over"></a></div> //pareil avec les autres miniatures

mais au passage de la souris le bloc s'agrandit à 125x125px avec l'image. Alors que j'aimerais avoir un "carré" semi-transparent par dessus de l'image!

J'ai pensé un moment de faire pour chaque image un div, et charger l'image en tant que background. Mais j'ai environ une 50aine de miniatures, alors pour chaque miniature un div avec ses paramètres... ça va faire trop!

S'il vous plaît, besoin de coup de main :)

Merci d'avance!

p.s. voici en image ce que je souhaiterais avoir comme résultat:
https://imageshack.com/

p.s. 2: je ne veux pas utiliser JavaScript de préférences! CSS+Html :)

A voir également:

7 réponses

Réponse 1 / 7
113pictural Messages postés 457 Date d'inscription jeudi 24 septembre 2009 Statut Membre Dernière intervention 5 octobre 2009 53
4 oct. 2009 à 03:38
Bonjour,

Je ne suis pas certain d'avoir tout compris de votre requête!

Toutefois, essayez de compléter votre .css avec:
(c'est peut-être judicieux de ne pas passer par un container, mais plutôt par un tableau <table> et autant de <tr> et de <td> que nécessaires ...définis par une seule classe)

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
.css

.over span
{
display: none
}

.over:hover span
{
/*les nouveaux arguments càd les effets que vous souhaitez obtenir, comme pour une info-bulle*/
position: absolute;
display:block;
border: _px solid #_ _ _ ;
top: _px; /*position depuis le haut*/
left: _px; /*position depuis le bas*/
filter:_;
filter:_
}

et sans le over:hover qui est désormais inutile


::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
.html

<table>
<tr>
<td><a href="_.htm" class="over"><img src="_/_.png> border="_" ... ... alt="#" />
<span>
<img src="... ... alt="#" />
</span>
</a>
</td>
<td>
...
</td>
</tr>
<tr>
<td>
...
</td>
</tr>
</table>
3
Réponse 2 / 7
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 056
10 oct. 2009 à 18:23
salut à vous !

C'est bien compliqué votre code là ! Pourquoi faire tout ça ?


et si tu met :

<img src="" alt="" class="over"/>

img.over {
border: 5px color solid; /* couleur, doit être la couleur de fond de page */
}
img.over:hover {
border: 5px blue solid;
}

Le cadre ne sera pas semi transparent, pour celà, il faut faire soit un cadre en couleur "rgba(rrr,ggg,bbb, alpha)" mais évidement IE ne prendre pas ça en compte. ou faire un div autour. En position absolute. un z-index: -1; et une opacité réduite. Là tu met le hover avec la bordure que tu veux.
Tu ouvre le div, et tu la referme tout de suite.
Tu étire ce div au bord du conteneur avec en css :
top: 0;
left:0;
right: 0;
bottom: 0;

ensuite, tu crée un seconde div. Tu y met le premier div (qui ne contient rien) et l'image. Ce second div est en position relative et un z-index de 10 par exemple.
3
Réponse 3 / 7
113pictural Messages postés 457 Date d'inscription jeudi 24 septembre 2009 Statut Membre Dernière intervention 5 octobre 2009 53
4 oct. 2009 à 03:43
Ou plus simplement:
dans votre html, déplacez class="over" dans <a ...>
1
Réponse 4 / 7
113pictural Messages postés 457 Date d'inscription jeudi 24 septembre 2009 Statut Membre Dernière intervention 5 octobre 2009 53
4 oct. 2009 à 04:10
erratum: j'ai écrit 2 fois <img src="_/_.png> en omettant de fermer avec "
Mais bien sûr, vous aviez déjà rectifié! Mille excuses ...
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
4 oct. 2009 à 10:45
Bonjour et merci de votre réponse.

J'ai déjà tenté de déplacer class=over dans le <a en vain --> l'image reste là, au premier plan.
En ce qui concerne les tableaux - j'essaye de les éviter :) Et de même, essayant comme vous l'avez écrit dans votre exemple ça marche pas. L'image reste là. Hors que je veux que l'image soit "couverte" par un carré semi-transparent.
Comme sur l'image que j'ai dessiné.

0
Réponse 6 / 7
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
9 oct. 2009 à 16:46
un petit up?! Quelqu'un a une idée svp?
0
Réponse 7 / 7
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
10 oct. 2009 à 15:02
Bonjour, en effet j'ai laissé tomber cette idée de "div par dessus", j'utilise une bordure et la transparence, qui donnent un assez jolie effet en général :)

CSS: 
#container1{width: 568px; text-align: center; background-color: #f4f5fb; -webkit-box-shadow: 0px 2px 15px #2E3865; -moz-box-shadow: 2px 2px 20px #2e3865;}
#mini {overflow:auto; list-style:none; margin:0px; padding:0;}
#mini li {float:left;}
#mini a {display:block; padding:10px; outline:none; opacity:0.4; filter: alpha(opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);}
#mini a:hover, #mini a:focus {background-color: #bfc1d7; opacity:1.0; filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
.img {border-color: #999; border-width: 1px;}

HTML: 
<div id="container1">
  <ul id="mini">
      <li>
        <a href="image_grande.png" target="_blank" class="">
          <img src="image_petite.png" title="cliquez pour agrandir" alt="description_par_ici" class="img"></a></li>
      <li></ul></div>


Donc pour l'encadrement c'est résolu.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Sur la plage...
kriiisss -
Utilisateur anonyme -

6 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Recherche par image Facebook pour retrouver quelqu'un
nzo64 -
Inconnue -

34 réponses