Effet pour un lien image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Effet pour un lien image

saifongjunfan

Bonjours je suis un débutant en programmation, j'utilise pour créer mes pages web le html et le css (pas encore le javascript).

Je suis en train de créer un site et dans ce site il y a une page (pour info la page filmographie) ou j'ai mis des image qui me serve de lien et ce que je voudrais, c'est que lorsque l'on passe le pointeur de la sourie par dessus cette image, sur l'image (n'importe ou) s'affiche un texte.

Je sais que je me suis peut être mal exprimée mais j'ai vu cet effet sur un site : http://www.gagodrago.com/galleryuk.htm donc si vous voulez voir quel est l'effet que je recherche passer le pointeur de votre sourie sur une des images de gago et vous verrez que s'affiche (en jaune) un texte ...

Il me semble que cet effet est créer grace a du code javascript sans en être sur...
J'espère que vous trouverez ( si vous ne l'avez pas déja une solution a ma question) j'ai fait quelque recherche mais comme j'arrive pas a écrire ce que je veus je ne trouve pas grand chose.

Merci d'avance pour une éventuelle réponse

Publicité

GTMistral

Ils ne font que changer l'image lorsque la souris se trouve sur l'image. Javascript le fait très bien. Je préfèrerais cette approche plutôt que le CSS. (Remarque pour changer le style CSS d'un élément de façon dynamique après le chargement de la page, tu es obligé de passer par le Javascript de toute façon!

Code :

<img src="image1.jpg" onMouseOver="this.src='image2.jpg';" onMouseOut="this.src='image1.jpg';">

Pour changer la "class" d'un élément HTML.

Code :

<style>
FONT.grosrouge { font-family:Verdana; color:#FF0000; font-size:32px; }
FONT.grosvert { font-family:Verdana; color:#00FF00; font-size:32px; }
</style>
...
<font class="grosrouge" onClick="this.className='grosvert';">Un texte d'exemble</font>

saifongjunfan

Bonjours a toi GTMistral tout dabord je voudrais te remercier pour ta réponse qui a l'air de plus ou moins marcher aprés des test, seulement voila l'image1 dans ton exemple que je prend ne reste pas fixe elle clignote sans arrêt ensuite je voudrais savoir ou ce place le deuxième code?
Sinon aprés une fois qu'on a fait cela comment faire pour placer l'image2 ou l'on veut sur la première image et sinon encore dernière question (je suis lourd je le sais) comment faire pour créer un texte avec un fond transparent et avec un style un peu come sur le site que je cite précédemment?

Je n'ai encore jamais utilisé de javascript donc il me faudrai ces quelques explications en plus.(il faut un début a tout le javascript a l'air d'apporté plus que le css finalement...)

saifongjunfan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Filmographie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>

<body>



<div id="en_tete">

</div>



<div id="menu">
<div class="element_menu">
<h3>Bruce Lee</h3>
<ul>
<li><a href="biographie.html">Biographie</a></li>
<li><a href="filmographie.html">Filmographie</a></li>
<li><a href="bibliographie.html">Bibliographie</a></li>
<li><a href="brucephotos.html">Photographie</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Jeet Kune Do</h3>
<ul>
<li><a href="jkdbio.html">Qu'est ce donc?</a></li>
<li><a href="jkdvideos.html">JKD videos</a></li>
<li><a href="jkdexpressions.pdf">JKD Terminology</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Divers</h3>
<ul>
<li><a href="index.html">Page D'Accueil</a></li>
<li><a href="liens.html">Liens</a></li>
</ul>
</div>
</div>



<div id="corps">
<h1>Filmographie</h1><br />
<p class="filmo">Pour accéder aux fiches des films CLIQUER sur leurs affiches</p><br />
<a href="bigboss.html"><img src="images/films/bigboss.jpg" alt="imgbigboss" class="centered" border="0" /></a><br /><br />
<a href="fureurdevaincre.html"><img src="images/films/affiche_Fureur_de_vaincre_1972_1.jpg" alt="imgfureurvaincre" class="centered" border="0" /></a><br /><br />
<a href="fureurdudragon.html"><img src="images/films/FureurDragon.jpg" alt="imgfureurdragon" class="centered" border="0" /></a><br /><br />
<a href="operationdragon.html"><img src="images/films/Operation_Dragon.jpg" alt="imgoperationdragon" class="centered" border="0" /></a><br /><br />
<a href="jeudelamort.html"><img src="images/films/JeuMort.jpg" alt="imgjeudelamort" class="centered" border="0" /></a><br /><br />

</div>
</div>


<div id="pied_de_page">
<p>Copyright "Jun fan <acronym title="Jeet Kune Do">JKD</acronym> Corporation " 2007, tous droits réservés</p>
</div>

</body>
</html>

Voici le code de la page ou je vais devoirs utilisé ces codes il y a cinq image qui sont toutes petites : un moyenne de 115fois140 pixels et je voudrais juste écrire par dessus en ayant si possible un texte de même style que sur le site que je nomme précédemment c'est a dire jaune un peu gras

GTMistral

Citation :

1- Le script que j'ai fourni (onMouseOver et onMouseOut) sont des scripts qui s'exécutent respectivement lorsque le curseur de la souris est par-dessus l'élément et lorsque le curseur quitte cet élément. Le but ici étant de prendre B = A + QuelqueChose (ou image2 = image1 + TonTexte). Amuse-toi avec un logiciel décent d'édition graphique. (J'ai dit décent, Paint c'est indécent).

2- <style> se place entre <head> et </head>. Dans l'entête quoi. Mais le code que j'ai fourni n'était qu'un exemple pour modifier la class d'un élément HTML via un évènement Javascript.

3- Maintenant, si tu tiens vraiment à y aller en CSS, y a les propriétés visibility:[visible ou hidden];, top:#px; et left:#px;. Dans ce cas-ci, il faut utiliser le deuxième exemple de code que j'ai fourni.

Code :

<html>
<head>
<style type="text/css">
<!-- La propriété position permet de placer un élément à la position désirée.
"relative" le positionnera par rapport à l'élément qui se trouve juste avant lui.
Dans ce cas-ci, l'image (<img> ). L'autre option de positionnement se trouve
à être "absolute" qui place l'élément affecté relativement au coin supérieur-gauche
de la zone d'affichage du navigateur. -->
FONT.text_visible { visibility:visible; position:relative; top:-50px; left:-60px; }
FONT.text_invisible { visibility:hidden; position:relative; top:-50px; left:-60px; }
</style>
</head>
</body>
[...]
<img src="image.jpg" onMouseOver="monTexte.className='texte_visible';" onMouseOut="monTexte.className='texte_invisible';">
<font id="monTexte" class="text_invisible">Mon texte</font>
[...]
</body>
</html>

Pour la dernière question, je suis pas sûr de comprendre ce que tu veux dire. Dis-moi de quel élément tu parles en particulier dans le lien que tu as mis dans ton premier message.

Sinon, pour faire du web aujourd'hui, il faut obligatoirement combiner plusieurs langage. HTML (même si ce n'est pas vraiment un langage... truc de puriste), CSS, Javascript/DHTML, etc. Pour ce que tu veux faire, tu n'as pas le choix de prendre Javascript et CSS. Pour tes besoins, tu n'auras besoin que des évènements onMouseOver et onMouseOut, this.src pour modifier la source d'un élément <img> ou elementQuelconque.className pour modifier la class d'un élément (ou "elementQuelconque" aura été défini dans un élément HTML avec la propriété id (ou name, mais pas disponible pour toutes les balises HTML)).

Va faire joujou avec mon TicTacToe. Je me suis amusé à le faire alors que je n'avais rien à faire. J'utilise à profusion tout ce que je t'ai donné en exemple (onMouseOver, onMouseOut, onClick, *.src, *.className). C'est un code validé par le W3C (voir le lien en bas de la page).

http://molrt.free.fr/tictactoe.html

note : la prochaine fois que tu mets du code dans ton message, mets-le entre les balises [_code][/code] (sans le underscore (_)).

Message édité par GTMistral le 04-11-2007 à 22:36:57

saifongjunfan

Merci beaucoup pour tes réponses GTMistral avec tout sa j'ai de quoi faire en plus aprés mes derniers essaies j'ai l'impression que tout fonctionne ...
Le javascript m'interrèsse de plus en plus je voudrai te demandé vu que tu a l'air de maitrisé un peu en javascript si tu avais apris sur un site a l'utilisé...Si oui lequels je voudrai commencé a apprendre a l'utilisé mais j'ai déja visionné quelques tutoriels assez incompréhensible... Donc au cas ou tu aurais de quoi faire mon bonheurs ...

GTMistral

J'ai appris sur le tas comme on dit. Je suis étudiant en informatique. Je fais du C++, C#, Java, Javascript, HTML, CSS, PHP, SQL, PLSQL. J'ai déjà fait du VB6 et VB.net, etc. Donc ça aide pour comprendre un langage. Quand je cherche quelque chose, je vais sur http://archives.allhtml.com. Google est ton ami aussi! C'est sûr que si tu n'as pas ou pratiquement aucune connaissance de l'univers de la programmation en général, ça devient un peu plus dur. Je voulais faire un Javascript il y a quelques jours et j'avais besoin des propriétés et méthodes de String (chaîne de caractère). J'ai cherché sur Google et j'ai tout de suite trouvé ce que je voulais.

Code :

function isValidFileExtension (url, zone)
{
// On est pas obligé d'envoyer une image avec son annonce!
if (url == "" )
return true;
// Extension de fichier valide : .gif, .png, .jpg, .jpeg
extension = url.substr(url.lastIndexOf("." ));
//alert("extension = (" + extension + " )" );
if (extension == ".gif" || extension == ".jpg" || extension == ".png" || extension == ".jpeg" )
return true;
else
{
alert(zone.toUpperCase() + "\n\nLe type de fichier que vous souhaitez envoyer n'est pas supportée.\n\n* Extension supportée : gif, png, jpg, jpeg\n* Votre extension : " + extension);
return false;
}
return false;
} // function isValidFileExtension (url, zone)

Message cité 1 fois
Message édité par GTMistral le 05-11-2007 à 20:27:06

gatsu35

Blablaté par Harko

GTMistral a écrit :

Code :

function isValidFileExtension (url, zone)
{
// On est pas obligé d'envoyer une image avec son annonce!
if (url == "" )
return true;
// Extension de fichier valide : .gif, .png, .jpg, .jpeg
extension = url.substr(url.lastIndexOf("." ));
//alert("extension = (" + extension + " )" );
if (extension == ".gif" || extension == ".jpg" || extension == ".png" || extension == ".jpeg" )
return true;
else
{
alert(zone.toUpperCase() + "\n\nLe type de fichier que vous souhaitez envoyer n'est pas supportée.\n\n* Extension supportée : gif, png, jpg, jpeg\n* Votre extension : " + extension);
return false;
}
return false;
} // function isValidFileExtension (url, zone)

roh ptain, toi tu aimes les trucs super longs qui servent à rien [:dawak]

Code :

function isValidFileExtension (url) {
var extension = url.match(/\.([a-z0-9]+)$/);
if (!url.match(/\.(jpe?g|png|gif)$/)) {
alert("le type de fichier n\'est pas supporté, blabalbalbabla, votre extension : " + (extension ? extension : "aucune extension" ) );
return false;
}
return true;
}

edit j'ai corrigé et fait l'equivalent exact de ta fonction [:dawak]

Message édité par gatsu35 le 06-11-2007 à 00:04:54

GTMistral

C'est pas parce que tu tappes des trucs qui ont l'air d'une compact japonaise que tu es nécessairement plus brillant qu'un autre... Ma fonction sert autant que la tienne puisqu'elle retourne la même chose.

Tant qu'à y être tes / et autres \ me donnent un peu mal à la tête. Je peux comprendre le ? et les "ou" unaire, mais alors là le dernier match() dans le alert(), j'y comprend stritement rien, bien qu'il a bien l'air de quelque chose qui marche... droit.

Bref, dans ce cas-ci, je préfère de loin avoir quelque chose de clair et facile à comprendre. Si c'était une opération critique, je dis pas, mais là ça frôle l'inutilité et le cryptage de code à avoir écrit quelque chose du genre. (Oui oui, traite-moi d'amateur si tu veux, je suis toujours pas professionnel! On nous apprend à coder de façon clair et à éviter certaine syntaxe "drogue".)

Message édité par GTMistral le 06-11-2007 à 00:03:05

gatsu35

Blablaté par Harko

ben les regexp c'est pas fait pour les chiens, c'est puissant, autant les utiliser.
Si tu veux je peux aussi m'amuser à te montrer des methodes comme map ou filter sur un array ou faire mumuse avec des fonctions anonymes.
C'est là toute la puissance du langage.
Si tu veux rester aux bases du langage c'est toi que ça regarde [:spamafote]

Accessoirement évite d'utiliser la balise <font> qui est juste moisi de nos jours, un span aurait suffit. Et sinon en CSS, tu peux déclarer les balises en minuscule :

SPAN.toto ==> span.toto

Publicité

xtof_83

Freeride Spirit

GTMistral on te donne pas des cours sur la performance de tel ou tel algo dans ta formation ?

Bon pour le match dans le alert, ben ça affiche tout bonnement l'extention tapé par le gars.

GTMistral

Justement, j'ai très peu codé en Javascript. Les trucs dont j'ai de besoin se résume par savoir la base du langage. Vas-y, instruis-moi! Y aura un con en moins sur ce forum!

Concernant <font>/<span> et mes déclarations CSS, c'est simplement une habitude de programmation que j'ai pris il y a quelques années de cela. Autant en HTML j'écrivais toutes mes balises en majuscule. (C'est plus le cas maintenant)

gatsu35

Blablaté par Harko

j'ai modifié ma fonction histoire que tu vois un truc un peu plus propre que le truc de crassous que j'avais écrit

FORUM HardWare.fr

Programmation

HTML/CSS

Effet pour un lien image

Sujets relatifs
[C] et [GTK] Redimensionnement d'une image dans un bouton	Lien hypertexte:Empecher la boite de dialogue "Ouvrir-Enregistrer-..."
Cadre bleu autour d'une image clickable	Ajax - Image Survolée
[Résolu] Article et image dans MySQL	[Résolu] Url stockée et lien HTML
Upload & Resize image ?	Php : Lien dans un cadre
explorateur Disque dur et upload image	[HELP] comment declancher un son au survol d'une image ?
Plus de sujets relatifs à : Effet pour un lien image

Page générée en 0.094 secondes