Rechercher : dans
Par :

Cadre autour d'image avec lien et rollover...

Dernière réponse le 4 mar 2008 à 00:13:32 madtraxxx74, le 3 mar 2008 à 17:22:08 
 Signaler ce message aux modérateurs

Bonjour, quand je met un lien sur une photo sur mon site j'ai un rectangle autour ne serait-ce pas possible de l'enlever svp ? ps: je code en html mais si une solution pas trop compliqué existe autrement dites la moi quand même ;)

Et aussi vous saver ce que c'est qu'un rollover en flash ? Et bien si vous savez pas c'est une image qui change lorsqu'on met la souris dessus...donc quand j'en met un sur mon site il marche normalement mais quand j'en met un deuxième plus aucun des deux ne change lorsque la souris passe dessus alors que quand j'en met qu'un que ce soit l'un ou l'autre il marche savez vous comment réglé sa ???

Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « Cadre autour d'image avec lien et rollover... » dans :
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...

1

Thamior, le 3 mar 2008 à 17:45:35

Je te conseil d'utiliser les feuilles de style.

Il te faut mettre quelques choses comme ça :

a img{
border: none ;
} Thamior.

Répondre à Thamior

2

madtraxxx74, le 3 mar 2008 à 18:03:27

Mais alors il faut que je fasse un fichier en .css ?

Répondre à madtraxxx74

3

Thamior, le 3 mar 2008 à 18:21:39

Pas forcément,

Si tu le mets dans une feuille de style, cela s'appliquera immédiatement à toutes les balises <a></a>.
Tu peux aussi le déclarer directement dans le <head></head>. Thamior.

Répondre à Thamior

4

madtraxxx74, le 3 mar 2008 à 18:59:12

Quesqu'une feuille de style ? Sa marchera si je le met dans une page en .htm ?

Répondre à madtraxxx74

5

faboons, le 3 mar 2008 à 19:14:39

Oui il faut que tu écrives ce code dans ta page html (bien sûr sans recopier <head> et </head> qui y sont déjà:

<head>
<style>
a img{ 
border: none ; 
} 
</style>
</head>


Mais dans ce cas ça affectera toutes les images mais je crois que c'est ce que tu veux.

Directement dans le html c'est :

<a href="blabla.html"><img src="blabla.jpg" border="0"/></a>


@pluche.
La solution html + css est plus élégante et surtout plus juste.

Répondre à faboons

6

madtraxxx74, le 3 mar 2008 à 19:24:31

Merci beaucoup :-) et aufait t'aurais pas une idées pour les rollover ?

Répondre à madtraxxx74

7

faboons, le 3 mar 2008 à 19:35:39

Non désolé je ne connais pas flash et je n'ai pas bien compris le problème peut-être que c'est pour ça que tu n'as pas de réponse.

tu devrais peut-être donner l'url de ton site??

@ pluche.

Répondre à faboons

8

madtraxxx74, le 3 mar 2008 à 19:49:25

Ok merci quand même alors pour si quelquu'un passe je vous explique j'ai utiliser un générateur de rollover sur le web ici ==> http://www.net-pratique.fr/outils/generoll.html et enfait c'est constituer de 2 images, une normal et une autre qui se met a la place de la première lorsque la souris est dessu...donc quand j'en met un seul sa marche met lorsque j'en met une autre qui marche lui aussi quand il est tout seul et bien sur les 2 l'images ne change plus quand la souris passe dessus vous pouvez essayer pour voir quesqui foire dans le code html....svp j'aimerai bien avoir un bon site...o_O

Répondre à madtraxxx74

9

faboons, le 3 mar 2008 à 23:22:49

Re, ok ça c'est pas du flash c'est du javascript tu peux me donner le code poste-le ici.

@ pluche.

Répondre à faboons

10

faboons, le 3 mar 2008 à 23:48:20

Salut, en fait je crois avoir pigé le script génère un modèle UNIQUEMENT pour 2 images.
Il te faut compléter le code.

Voilà le script où tu déclares tes 4 images :

<script type="text/javascript">
Image1 = new Image();
Image1.src = "chemin_image1";
Image2 = new Image();
Image2.src = "chemin_image2";
Image3 = new Image();
Image3.src = "chemin_image3";
Image4 = new Image();
Image4.src = "chemin_image4";
</script>


et le html :

<img name="Roll"  style="border : 0px" src="chemin_image1" alt="" onMouseOver="document.Roll. src='chemin_image2'" onMouseOut="document.Roll.src='chemin_image1'" />
<img name="RollImage"  style="border : 0px" src="chemin_image3" alt="" onMouseOver="document.RollImage.src='chemin_image4'" onMouseOut="document.RollImage.src='chemin_image3'" />


Comme tu le vois ce qui change c'est d'une part le nombre de déclaration d'images dans le script et ensuite l'attribut name qui prend deux valeurs différentes, à savoir Roll et RollImage.
donc si tu veux encore rajouter des images pense à changer le nom et àles déclarer dans le script.

@ pluche.

Répondre à faboons

11

 GhostGrapher, le 4 mar 2008 à 00:13:32

Pour ton rollover tu peux juste faire ça :

<script>
function changeimg1() {
document.getElementById('image1').src = 'image2.jpg' ;
}
</script>
<img id="image1" src="image1.jpg" alt="image" onmouseover="changeimg1()" />


voire même :

<script>
document.getElementById('image1').OnMouseOver= changeimg1() ;

function changeimg1() {
document.getElementById('image1').src = 'image2.jpg' ;
} 
</script>
<img id="image1" src="image1.jpg" alt="image" />


Normalement ca devrai marcher

Répondre à GhostGrapher
Collection CommentÇaMarche.net