Rechercher : dans
Par :

Rollover+lien

Dernière réponse le 21 jui 2008 à 08:54:23 Hawky59, le 17 jui 2008 à 13:33:23 
 Signaler ce message aux modérateurs

Bonjour,
J'ai bien réussi à créer mes rollover sur ma page d'accueil
Maintenant, je voudrais utiliser le bouton rollover comme lien. C'est à dire que ces rollover sont des drapeaux et je veux que lorsqu'on clique dessus on puisse accéder aux pages dans la langue choisie.
Mes pages sont pretes, je cherche juste à les lier via le bouton rollover
Merci pour vos réponses

Configuration: Windows XP
Firefox 2.0.0.16

Meilleures réponses pour « rollover+lien » dans :
Faire un lien vers CommentCaMarche Voir Vous êtes le bienvenu pour faire un lien vers CommentCaMarche.net ! Vous avez l'autorisation de faire pointer un lien vers la page d'accueil de CommentCaMarche.net ou bien directement vers un des articles. Si vous voulez agrémenter le lien d'une...
[PHP] Transformer une URL en lien hypertexte cliquable VoirGrâce aux expressions régulières, il est possible de transformer en lien hypertexte toute URL de la forme http://URL (ou ftp://URL) ou bien commençant par www. :
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...
Javascript - Lien aléatoire / Choisir un lien au hasard VoirLe script ci-dessous permet de créer un lien hypertexte dirigeant le visiteur vers une adresse choisie au hasard dans une liste. Le code ci-dessous est à insérer entre les balises et en début de page :

1

Hawky59, le 17 jui 2008 à 13:39:03

J'ai compris (enfin je crois) qu'il faut mettre une commande genre <a href.....> <a/>
mais laquelle au juste? Ca par exemple
<a href="http://www.lesotlylaisse-lille.fr\home"> <img src=" enter_over.png "> </a>
et je la place où?
juste après le code de mon rollovover?

Répondre à Hawky59

2

macgawel, le 17 jui 2008 à 13:43:50

Bonjour.

Comment gères-tu tes rollovers ?

Ce serait bien de nous donner le source de ce que tu as déjà fait, parce que là, pour t'aider c'est un peu chaud !

Répondre à macgawel

3

Hawky59, le 17 jui 2008 à 17:39:07

Salut, pour mon rollover, j'ai crée 2 images (jusqu'ici normal!)
Et voici le code d'une de mes cellules :

<td style="width: 266px; height: 56px;" align="center"
valign="center"><img style="width: 193px; height: 62px;"
alt="Enter"
src="file:///C:/Documents%20and%20Settings/Administrateur/Bureau/Le%20Sot%20L%27Y%20Laisse/Site%20web/Page%201/enter%20out.png"
onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrateur/Bureau/Le%20Sot%20L%27Y%20Laisse/Site%20web/Page%201/enter%20over.png'"
onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrateur/Bureau/Le%20Sot%20L%27Y%20Laisse/Site%20web/Page%201/enter%20out.png'">
<br>
</td>

Répondre à Hawky59

4

macgawel, le 17 jui 2008 à 18:06:45

Arrrgh !

1. Pourquoi utiliser un tableau ?
2. Passe le chemin de tes images en "relatif" (per rapport au chemin du fichier qui les appelle)
3. Profite-en pour "normaliser" les noms (caractères alphanumériques, sans accents, sans espaces. Dans ton cas, par exemple : enter_out.png)

En fait, ce que tu veux, si je comprends bien, c'est un lien avec une image en fond, image qui change quand tu survoles le lien. C'est bien ça ?

=>
Utilise le CSS.
Par exemple (en décrivant tes styles dans la page, mais c'est mieux d'utiliser une feuille de style externe, que tu pourras appeler dans chaque page) :

<head>
<style type="text/css">
.rollover a {
   width: 266px;
   height: 56px;
   background-image:url(<le chemin relatif>/enter_out.png);
   background-repeat:no-repeat;
   display:block;
}
.rollover a:hover {
   background-image:url(<le chemin relatif>/enter_over.png);
   background-repeat:no-repeat;
}
</style>
</head>
<body>
...
<p class="rollover"><a href="http://www.lesotlylaisse-lille.fr/">Le sot l'y laisse</a></p>
</body>

Répondre à macgawel

5

Hawky59, le 17 jui 2008 à 22:56:36

Merci pour ces infos, j'avais bien utilisé alphanumérique sans accent pour mes noms de fichiers ms zappé les espaces! merci de l'info. J'essaie de développer mon 1er site web.
Sinon pour en revenir à ce que je veux faire , c'est pas tt à fait ça! Etant novice, je peine à expliquer clairement (et aussi à assimiler rapidement la langage HTML, même si ça commence à rentrer). Désolé

Grosso modo : pr ma page d'accueil, j'ai fait un tableau avec, dans 3 cellules des boutons rollover, dans mon editeur (Nvu), ca fonctionne, ca réait qd je passe la souris dessus.
Je veux maintenant attribuer un lien à l'image "over" : soit pouvoir accéder à une autre page lorsqu'on clic ac bouton gauche de la souris.

Est il possible d'attribuer une image "background" à un tableau et d'attribuer d'autres images pour les boutons (que j'ai réalisé) à certaines cellules?

J'commence à peine à comprendre le HTML, pas encore le CSS. Quel est l'intéret des feuilles CSS? Est ce plus léger? Est ce plus rapide? ... ou tout simplement plus simple à programmer?

Merci pour tes conseils qui m'intéressent beaucoup

Répondre à Hawky59

6

macgawel, le 18 jui 2008 à 13:20:21

Si tu veux éviter de tout reprendre à zéro (ce que je comprendrais), il te suffit de faire

<td style="width: 266px; height: 56px;" align="center"
valign="center"><a href="http://www.lesotlylaisse-lille.fr/home">
<img style="width: 193px; height: 62px;"
alt="Enter"
src="./ente­r%20out.png"
onmouseover="this.src='./enter%20over.png'"
onmouseout="this.src='./enter%20out.png'" /></a>
<br />
</td>

(J'ai rajouté un "/" à la fin de tes balises imget br pour respecter le XHTML, mais ce n'est pas indispensable...)

Quel est l'intéret des feuilles CSS?
Est ce plus léger?
Oui.
Est ce plus rapide? ...
Oui.
ou tout simplement plus simple à programmer
A programmer, pas forcément.
Mais à maintenir, oui.

En fait, ça dépend de quel point de vue on se place :

Pour le dévelppeur de site, c'est plus simple puisque toutes les informations de mise en page et de présentation sont regroupées dans un même fichier.
Pour le visiteur c'est plus léger (et donc plus rapide), puisqu'il télécharge une fois pour toutes les informations de mise en page.
Parce que, mine de rien, un <td> au lieu de <td style="width: 266px; height: 56px;" align="center">, répété plusieurs fois par page, dans plusieurs pages, ça finit par chiffrer...

Pour la maintenance, imagine que tu veuilles transformer ton site pour noël (en passant en rouge et blanc, avec des images style sapin etc.).
Si tu mets les informations de présentation dans tes pages html, il va falloir éplucher tes X pages, chercher les informations de couleur et les modifier une par une (au risque d'n oublier).
Si tu as utilisé une feuille de style, il te suffit de modifier deux ou trois informations dans la feuille de style.


Il vaut mieux éviter de faire ta mise en page avec des tableaux.
Si tu as du temps (et le courage) je te conseille d'aller voir ces sites :
Alsacreations, qui a pas mal de tutoriels (dont Créer un design CSS en 5 étapes.
[www.pompage.net Pompage.net], bien aussi, avec un "tutoriel" en quinze parties.

Répondre à macgawel

7

Hawky59, le 18 jui 2008 à 22:46:34

Encore merci pour ces précisions et informations!! t'es un bon prof ;)
J'en ai le courage et la volonté, j'veux faire un joli site, donc j'irai voir tes liens (déjà enregistrer dans mes favoris!).
Encore une question, je sais je t'embete avec mes questions... Existe t il une manip, un code pour protéger les images de mon site? Je m'explique : sur mes pages il y a des créations perso (fresque et logo notamment). Puis je empecher le "clic droit+enregistrer sous" et le téléchargement de ces images?
Enocre un grand MERCI pour tes éclaircissements

Répondre à Hawky59

8

 macgawel, le 21 jui 2008 à 08:54:23
  • +1

Réponse.

Il n'y a malheureusement aucun moyen pour protéger complètement tes images...
Mais il y a toujours le dtoir d'auteur, et quelques astuces pour te progtéger.

Répondre à macgawel