Il y a actuellement 77 visiteurs
Mardi 03 Août 2021
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Bordure image

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

Bordure image

Message le 25 Juin 2007 15:55

Voila mon probleme. J'ai des images avec des bordures et je souhaitrai que ces bodures changent quand la sourie passe dessu. Pour mes lien text dans ma page CSS j'ai mis:

a:hover {
color: red;
text-decoration: none;
}

Ici pas de probleme sa marche mais pour mes images je doit faire comment ???
Cordialement
vincent.lepy
Sous Expert(e)
Sous Expert(e)
 
Messages: 87
Inscription: 22 Mai 2007 10:17
Localisation: En Mayenne
 


Message le 25 Juin 2007 18:33

Essaye ça, en mettant un lien avec la classe appelée "lienimage" autour de l'image en question.
Code: Tout sélectionner
a.lienimage img {border:1px solid #ffffff;}
a.lienimage:hover img {border:1px solid #000;}
Walk of shame, walk of game... what uuuup !
Avatar de l'utilisateur
coyote89
PC-Infopraticien
PC-Infopraticien
 
Messages: 7862
Inscription: 07 Mai 2003 17:39
Localisation: Chine :)
 

Message le 25 Juin 2007 19:31

Voici mon code de ma page CSS:

.lienimage img {
height: 100px;
width: 120px;
margin-top: 20px;
margin-left: 40px;
border:1px solid red;
text-decoration: none;;
}

.lienimage:hover img {
height: 100px;
width: 120px;
margin-top: 20px;
margin-left: 40px;
border:1px solid yellow;
text-decoration: none;
}

et voici le code de ma page ou se trouve les photos:

<?php
// insertion de l'entete.
include("entete.php");?>

<div class="lienimage">
<a href="images/charpente01.jpg" target="_blank"><img src="images/charpente01.jpg" width="65" /></a>
<a href="images/charpente02.jpg" target="_blank"><img src="images/charpente02.jpg" width="65" /></a>
<a href="images/charpente03.jpg" target="_blank"><img src="images/charpente03.jpg" width="65" /></a>
<a href="images/charpente04.jpg" target="_blank"><img src="images/charpente04.jpg" width="65" /></a>
<a href="images/charpente03.jpg" target="_blank"><img src="images/charpente03.jpg" width="65" /></a>
<a href="images/charpente02.jpg" target="_blank"><img src="images/charpente02.jpg" width="65" /></a>
<a href="images/charpente04.jpg" target="_blank"><img src="images/charpente04.jpg" width="65" /></a>
<a href="images/charpente01.jpg" target="_blank"><img src="images/charpente01.jpg" width="65" /></a>
<a href="images/charpente01.jpg" target="_blank"><img src="images/charpente01.jpg" width="65" /></a>
<a href="images/charpente03.jpg" target="_blank"><img src="images/charpente03.jpg" width="65" /></a>
<a href="images/charpente02.jpg" target="_blank"><img src="images/charpente02.jpg" width="65" /></a>
<a href="images/charpente04.jpg" target="_blank"><img src="images/charpente04.jpg" width="65" /></a>
</div>
</body>
</html>
Cordialement
vincent.lepy
Sous Expert(e)
Sous Expert(e)
 
Messages: 87
Inscription: 22 Mai 2007 10:17
Localisation: En Mayenne
 

Message le 25 Juin 2007 19:50

Et ça marche comme ça ? :o
Pour moi, il faut faire comme je t'ai montré : la fonction hover s'applique à un lien, donc à la balise "a".
Walk of shame, walk of game... what uuuup !
Avatar de l'utilisateur
coyote89
PC-Infopraticien
PC-Infopraticien
 
Messages: 7862
Inscription: 07 Mai 2003 17:39
Localisation: Chine :)
 

Message le 26 Juin 2007 06:42

Non désoler j'ai fais comme tu ma dit mais ca ne fonctionne pas. La couleur reste toujours la meme.
Cordialement
vincent.lepy
Sous Expert(e)
Sous Expert(e)
 
Messages: 87
Inscription: 22 Mai 2007 10:17
Localisation: En Mayenne
 

Message le 26 Juin 2007 09:15

Avec firefox, ça devrait marcher. J'essaierai aujourd'hui et je te confirmerai.
Walk of shame, walk of game... what uuuup !
Avatar de l'utilisateur
coyote89
PC-Infopraticien
PC-Infopraticien
 
Messages: 7862
Inscription: 07 Mai 2003 17:39
Localisation: Chine :)
 

Message le 26 Juin 2007 11:00

+1 avec Coyote, sa solution devrait fonctionner :-?

IE n'accepte des "Hover" que sur la balise <A> si je ne me trompe, sur Firefox ça fonctionne normalement quelque soit la balise :)
“It has to start somewhere, it has to start sometime, what better place than here, what better time than now?”
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1932
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 

Message le 26 Juin 2007 12:29

C'est exactement se que j'allai demander. Il me semblai avoir vu sa sur un autre forum. Donc si je souhaite faire sa, je ne doit plus me servir de IE? :-?
Cordialement
vincent.lepy
Sous Expert(e)
Sous Expert(e)
 
Messages: 87
Inscription: 22 Mai 2007 10:17
Localisation: En Mayenne
 

Message le 26 Juin 2007 14:36

C'est exactement se que j'allai demander. Il me semblai avoir vu sa sur un autre forum. Donc si je souhaite faire sa, je ne doit plus me servir de IE?


Pas seulement toi, tous les utilisateurs de ton site, enfin ils ne verront pas la bordure sous IE, c'est pas la mort non plus :)
Tu rajoutes 1 logo Firefox avec un lien pour le télécharger en bas de page et hop !
“It has to start somewhere, it has to start sometime, what better place than here, what better time than now?”
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1932
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 

Message le 26 Juin 2007 15:04

c'est pas la mort non plus, je sais mais bon sa aurai permit de continuer dans le même esprit du site. Enfin merci de votre aide.
Cordialement
vincent.lepy
Sous Expert(e)
Sous Expert(e)
 
Messages: 87
Inscription: 22 Mai 2007 10:17
Localisation: En Mayenne
 

Message le 26 Juin 2007 18:18

L'exemple de Coyote (hover sur les <a>) est compatible sur tous les navigateurs.
“It has to start somewhere, it has to start sometime, what better place than here, what better time than now?”
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1932
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 

Message le 27 Juin 2007 06:42

Pourquoi sa fonctionne pas chez moi alors ?? J'ai fait exactement comme Coyote ma dit, et rien.
Cordialement
vincent.lepy
Sous Expert(e)
Sous Expert(e)
 
Messages: 87
Inscription: 22 Mai 2007 10:17
Localisation: En Mayenne
 

Message le 27 Juin 2007 09:20

Le code html qui correspond à mon CSS, tu peux nous en montrer un bout ?
Je pense que tu appliques mal la classe lienimage.
Walk of shame, walk of game... what uuuup !
Avatar de l'utilisateur
coyote89
PC-Infopraticien
PC-Infopraticien
 
Messages: 7862
Inscription: 07 Mai 2003 17:39
Localisation: Chine :)
 

Message le 27 Juin 2007 09:27

Plus haut il y a le code de ma page CSS et le code de ma page ou se trouvent mes photos.
Cordialement
vincent.lepy
Sous Expert(e)
Sous Expert(e)
 
Messages: 87
Inscription: 22 Mai 2007 10:17
Localisation: En Mayenne
 

Message le 27 Juin 2007 09:40

Ok donc c'est ce que je disais, tu ne mets pas le bon html.
Voici un exemple qui fonctionne sous IE et firefox sans problème.
Et voici le code utile :
Code: Tout sélectionner
<style type="text/css">
   a.lienimage img {border:1px solid #f5a4dd;}
   a.lienimage:hover img {border:1px solid #000;}
</style>

Code: Tout sélectionner
<a class="lienimage" href="#"><img src="/images/test.jpg" alt="test" /></a>
Walk of shame, walk of game... what uuuup !
Avatar de l'utilisateur
coyote89
PC-Infopraticien
PC-Infopraticien
 
Messages: 7862
Inscription: 07 Mai 2003 17:39
Localisation: Chine :)
 

Suivante


Sujets similaires

Message Police depuis une image- Résolu
Bonjour à tousEst ce que quelqu'un connait un outil qui puisse récupérer une police d'écriture depuis une image.J'ai essayer pas mal d'outils proposé sur le net et pas de conclusion hélas.https://fr-fr.facebook.com/1877469812465742/photos/1877477345798322/Je dois récupérer ces deux écritures pour un ...
Réponses: 0

Message Micro freeze image + son en jeu et sur windows.
Bonjour,Je viens vers vous car je ne sais pas quoi faire, j'ai absolument essayé de faire le maximum pour régler mon problème.En effet j'ai des micros freeze en jeu et sur windows (micro freeze son aussi) En faite j'ai ça quand j'ai des chutes de fps en jeu (par exemple j'ai une chute de 10-15 fps s ...
Réponses: 8

Message Responsive : Changer la position de l'image de fond
Bonjour, sur un site que je développe, j'ai une image de fond qui est située au centre lorsque le site s'affiche sur un écran d'ordinateur. Seulement, pour le moment, en affichage mobile, l'image ne bouge pas et du texte vient la recouvrir (ce qui cache l'image et rend le texte illisible). J'aimerai ...
Réponses: 0

Message image DD systeme win10
Bonjour à tous, ok, création de l'image système de mon C: mis en lieu sur un DD externe, + création d'un CD de récupération, aussi mis en lieu sur.Donc, de mon expérience d'avec true image d'acronis ou pccloneur de micro application, si crach de mon C:, achat d'un nouveau DD démarrage sur le CD de ...
Réponses: 1

Message Quelle est la nature de cette ressource (fichier image, fich
Quelle est la nature de cette ressource (fichier image, fichier pdf, etc) ?
Réponses: 3

Message [Résolu] moniteur yusmart n° 198EP-A en panne d'image.
Bonjour à tous, voici mon problème.j'ai donné un ordinateur de bureau à ma soeur il y a plus de deux ans,comme elle ne l'a pas utilisé, elle me l'a rendu.l'écran est en panne: après la mise en route, il s'illumine en blanc/gris et il y a cinq lignes horizontales qui s'affichentj'ai remarqué que je n ...
Réponses: 5

Message [Réglé] Souci d'image retournée sur ASUS hybride ?
bonjour à toutes et tousnous venons d'acheter pour ma femme un petit pc portable Asus 10 pouces qui est ici:https://www.cdiscount.com/informatique/ordinateurs-pc-portables/pc-portable-reconditionne-t101ha-gr004t-10-1/f-1070992-asu4712900396591.html?idOffre=239875078#mpos=1|mpJ'utilise un système win ...
Réponses: 11


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


.: Nous contacter :: Flux RSS :: Données personnelles :.