18073 sujets

Questions générales et questions de débutants

Lien d'un calque ou d'une balise [Résolu]

Bonjour.

J'essaie de créer un effet survolé à l'aide de css sur un calque ou une balise et je ne comprends pas comment faire. J'ai créé un calque et lui ai donné un nom. Je tente d'y mettre une image qui sera un lien et aussi d'avoir un effet "hover" en passant le curseur par dessus mais rien n'y fait. Je suis incapable de faire un lien sur cette image que j'ai inséré à l'aide d'un css. Comment dois-je procéder? Je veux placer cette nouvelle image par-dessus une autre image qui est à l'indérieur d'une balise qui s'appelle footer.

Merci.
Modifié par largowin (24 Jul 2005 - 13:29)
Bonjour largowin et bienvenue sur ce forum Smiley lol

T'aurais pas un petit bout de code à nous montrer ? Juste un petit bout ? Smiley murf
hello largowin Smiley smile

sans savoir si cela répond à ta question, et pour cause Smiley langue

html :

<div id="conteneur_lien">
<a href="...">texte du lien</a>
</div>


css :

#conteneur_lien {
width:100px;/* en fait les dimensions de l'image */
height:50px;
}

#conteneur_lien a {
display:block;
height:100%;
text-indent:-15000px;
background-image:url(imglink1.jpg);
}

#conteneur_lien a:hover {
background-image:url(imglink2.jpg);
}


++
Stephan. Non, je n'ai pas de bout de code à montrer, car je n'y comprends rien du tout...

C'est noté Igor. Et pour la page en ligne, il y a un problème avec mon hébergeur présentement. Ils me disent que le tout devrait rentrer dans l'ordre demain. Je pourrai à ce moment-là mieux montrer de quoi il s'agit.

clb56. Ça ne fonctionne pas ce que tu m'a donné, car je ne veux justement pas mettre un texte comme lien. Je veux que ce soit seulement une image qui est le lien et qui change d'apparence lorsqu'on passe le curseur dessus, comme lorsqu'on va dans le menu "insertion" avec dreamweaver et qu'on choisit "image survolé". On peut alors y mettre un lien.

Merci.
Connais-tu ce tutoriel: Une image réactive (rollover) sans javascript

a écrit :
lb56. Ça ne fonctionne pas ce que tu m'a donné, car je ne veux justement pas mettre un texte comme lien.


L'as-tu réellement testé, car moi oui et il fonctionne Smiley cligne . En plus cela te permet comme tu le souhaites un effet rollover. Pour ce qui est du texte, l'exemple te permet de le cacher (text-indent:-15000px;).

a écrit :
je n'ai pas de bout de code à montrer, car je n'y comprends rien du tout...

Tu devrais nous dire à quel niveau de compréhension d'html et css tu te situes. Smiley biggrin
C'est exactement ça que je veux faire, mais ça ne fonctionne pas dans ma page Smiley decu . J'ai placé les lignes de code mais on ne voit rien.

Je peux enfin mettre en ligne ce que j'ai fait http://cheznoir.com/alcreation/index.html et ce que je veux faire avec mon rollover: http://cheznoir.com/alcreation/logo.gif

Ça vous paraîtra certainement très bizarre, car je ne m'y connais pas tellement en html et CSS mais j'ai créé une cie de conception de sites web voilà environ 4 mois, car je voulais m'acheter un nouvel ordi (déductions d'impôts applicables et à une foule d'autres choses connexes) et aussi, parce que je fais à l'occasion quelques contrats de peinture et certaines gens ont besoin de factures pour le travail.

Pour ma cie, j'ai donc "appris" Photoshop (en association étroite avec imageready dans le but de faire des pages web) l'été passé et j'ai fait plusieurs modèles de pages (45 environ) à proposer à d'éventuels clients. Ça fait finalement des pages très lourdes qui s'affichent difficilement et qui manque de compatibilité très souvent.

Finalement, ayant démarré ma cie en ligne, j'ai commencé à m'intéresser aux CSS en particulier grâce à cssZengarden qui m'a littéralement jeté sur le cul. Je me suis acheté un livre suggéré par Alsacréations (Éric Meyer) et compte m'acheter prochainement celui de Raphaël G. por parfaire mon éducation, car je trouve l'autre quelque peu limité (projets plus ou moins intéressants pour moi, enfin, ce n'est pas ce que je cherchais).

Bref, n'ayant pas encore un seul client pour ma cie... j'ai décidé de faire quelques sites web gratuitement pour des organismes communautaires puisque - c'est comme pour les restos - les clients attirent les clients...

Donc, mes connaissances sont très limitées. Je me sers de ces modèles pour apprendre (très basic mais quand même intéressants pour apprendre) http://www.oswd.org/ Il faut faire le tri, car il y a plusieurs "horreurs" dans le lot qui se mélanges aux autres qui ont plus d'allure. Le webmestre devrait faire une meilleure sélection...

Voilà. C'était en quelque sorte la présentation que j'ai omis de faire lorsque j'ai posté mon message. Merci de m'avoir répondu quand même...

En guise de remerciements, je vous donne le MEILLEUR lien que j'ai trouvé sur le web jusqu'à maintenant http://www.bluevertigo.com.ar/bluevertigo.htm et un autre qui vous amènera vers une petite merveille pour les textures http://www.grsites.com/textures/

Voilà, merci pour votre aide et si vous y comprenez quelque chose à mon erreur, faites-le moi savoir.
Modifié par largowin (23 Jul 2005 - 14:56)
bon en fait il y a des erreurs d'adresses :


#conteneur_lien {
 width:100px;/* en fait les dimensions de l'image */
 height:50px;
 }

 #conteneur_lien a {
 display:block;
 height:100%;
 text-indent:-15000px;
 background-image:url(../giger228/cheznoir.gif);/* il faut mettre url(images/cheznoir.gif) */
 }

 #conteneur_lien a:hover {
 background-image:url(../giger228/imglink2.jpg);/* il faut mettre url(images/imglink2.jpg) */
 }


N'oublie pas de créer imglink2.jpg parce que pour l'instant elle n'existe pas (même dimensions que cheznoir.gif) Smiley cligne

Et n'oublie pas non plus de modifier les dimensions de #conteneur_lien en fonction de la taille de ton image. re Smiley cligne
Non, c'est pas vrai!!!!.... Comment aie-je pu faire une erreur aussi stupide... et surtout, n'être même pas foutu de la trouver... Tout fonctionne parfaitement maintenant

Merci énormément clb56 pour ton soutien et à tous les autres aussi...
Dac. J'ai lu ce qu'il fallait faire pour le statut "résolu" mais... j'ai un autre petit problème... Après, promis, je ne vous dérangerai plus.... Je termine ce site que j'ai promis, mon contrat de peinture que je fais depuis 2 semaines et je potasse mes livres avant de retravailler sur quoi que ce soit d'autre...

En fait, je n'arrive pas à déplacer mon rollover à l'endroit où j'aimerais qu'il soit (comme ci-haut montré http://cheznoir.com/alcreation/logo.gif). Quand j'essaie de le déplacer, il se glisse au-dessous du div "footer".

Merci.
Bon dimanche Smiley smile 


#conteneur_lien {
position:relative;
top:-xxxpx;/* à toi d'adapter (valeur négative) */
left:xxxpx;
z-index:1000;/* en l'absence d'info je met une valeur très élevée */
}


au passage un petit détail que j'avais oublié Smiley rolleyes , complète ta css avec :

#conteneur_lien a {
text-decoration:none;
}


++

<edit>
cela dit tu peux de toute façon mettre conteneur_lien avant footer dans ton code html
</edit>
Modifié par clb56 (24 Jul 2005 - 08:21)
Sujet clos
Aller à