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
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
A voir également:
- DIV par dessus d'une image
- Google recherche par image - Guide
- Image iso - Guide
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Faststone image viewer - Télécharger - Visionnage & Diaporama
7 réponses
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
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>
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>
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
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.
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.
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
4 oct. 2009 à 03:43
Ou plus simplement:
dans votre html, déplacez class="over" dans <a ...>
dans votre html, déplacez class="over" dans <a ...>
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
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 ...
Mais bien sûr, vous aviez déjà rectifié! Mille excuses ...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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é.
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é.
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
9 oct. 2009 à 16:46
un petit up?! Quelqu'un a une idée svp?
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
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:
HTML:
Donc pour l'encadrement c'est résolu.
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.