18073 sujets

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

Images de fond en tant que liens ?

Pages :
Bonjour
Je suis en train de créer un site et ce, depuis quelques semaines . .
N'utitlisant pas d'éditeur spéciale autre qu'un simple bloc note, j'écris pour m'amuser et fait des " dessins " avec le code source . .
[ après ste petite introduction ] Tient à dire que l'extension de mes pages est en .php, mais n'en ai besoin que pour le compteur : il s'agit juste d'une prévision . .
Vais bientôt commencer les feuilles de style parceque là, les possibilités commencent un peu à se restreindre . .
Tout ça pour en venir à ma question :
Est il possible de définir une image d'arrière plan [body background ] en tant que lien vers une autre page ( contenant elle même une autre image en tant que background etc . . ) pour faire, par exemple une transition agréable entre deux " sujets " . .
Bonsoir,

Essayez le code suivant :

le css :

<style type="text/css">
a {
	background : url("./votreimagedefond.gif") 0 0 no-repeat ;
	display : block ;
	height : 25px ;
	width : 200px ;
	text-align : center ;
}
</style>

le html :

<a href="http://www.alsacreations.com">Alsacreation</a>


Bon courage Smiley cligne
freedavvidoff a écrit :

le html :

<a href="http://www.alsacreations.com">Alsacreation</a>


Je ne vois pas trop le rapport . .Je m'explique : je voudrais faire en sorte seulement ( et si c'est possible en html sinon je le ferais en css ) définir une image DE FOND, une image BACKGROUND en tant que LIEN . . c'est tout

pas comme ça : http://ibryfish.free.fr/cheforet.php[/url], mais plutot comme ça : http://ibryfish.free.fr/go.php [/url] sans le lien pour l'instant quasi invisible qu'est la lettre " C " et que ce soit l'image elle même, prenant toute la place dans la fenêtre qui serve de lien pour aller sur une autre page . .

Is it possibeul ?
Ce que je viens de vous proposer est pour moi la solution la plus adaptée. Vous n'êtes pas obligé de mettre du texte entre les balises "a".

Il vous suffit de fixer les dimensions de vos images dans le code css ( pouvant être intégrer" dans votre document html), appeller les images par "url" et ensuite de faire vos transitions entre chaque page...

understood ?..
Modérateur
freedavidoff a écrit :
Ce que je viens de vous proposer est pour moi la solution la plus adaptée. Vous n'êtes pas obligé de mettre du texte entre les balises "a".


Bonjour,

Je dirais plutôt que c'est fortement recommandé de mettre du texte dans la balise <a> pour permettre à ceux naviguant sans images de pouvoir naviguer justement dans le site. Sans image, sans texte, aucun repère possible pour cliquer.

ibryd, pourquoi veux-tu absolument que ce soit une image de fond ? Je n'ai pas saisis ton objectif réel. Si je relis ta demande, tu veux que la balise body soit cliquable, qu'elle soit un lien ? Si c'est le cas, il faudrait nous montrer ce que tu veux réaliser concrètement, parce que ca risque de poser des problèmes à l'utilisateur.

Techniquement, si tu veux pouvoir faire un lien dans une page html, tu as deux choix :

- Utiliser une balise a
- Événement onclick Javascript, mais qu'on peut tout de suite oublier pour une question d'accessibilité.

Peux-tu nous expliquer un peu plus en détails ce que tu veux réaliser ?
Merci
Modifié par Tony Monast (30 Nov 2005 - 20:15)
a écrit :
Peux-tu nous expliquer un peu plus en détails ce que tu veux réaliser ?
Merci

alors voilà, j'aimerais partager des images, une suite d'image assimilées à des pages web à part entière, et faire en sorte que, après le chargement de la page ( donc l'image s'afiche en tant que background sans texte seulement avec des précisions alt=" " et title=" " ), l'internaute puisse cliquer sur la page, pour l'instant n'importe quel endroit
( j'y avais pas pensé mais, est-ce qu'en délimitant des zone sur l'image. . mais non ça marche pas parceque c'est pas une <img src=" . ."> mais une <body background="images/ . ."> )
on pourrait pas indiquer un lien envoyant à une autre page ?
ainsi faire le même effet que la lettre C dans la page
http://ibryfish.free.fr/go.php [/url]
sans la lettre C ( <a href="uneautrepage.extension">C</a>) simplement encliquant à n'importe quel point de l'image ?

Voilà j'espère avoir été clair . Merci Smiley cligne
Modérateur
Normalement, les images de fond sont destinées à décorer. Dans ton cas, il s'agit bien plus d'un contenu réel à présenter. Pourquoi ne pas utiliser une balise img ? Est-ce parce que tu veux que l'image fasse 100% de l'écran ? Quelle est ta motivation ?

Je peux paraître trop curieux, mais je t'assure que c'est important qu'on le sache afin de te proposer les bons choix, des choix accessibles, ergonomiques et compatibles. Smiley smile
je vais être un peu brutal :


<a href="...">
  <img src="..." alt="...">
</a>


Certes primaire, décevant même.

Mais prévu pour, accessible et interopérable, à la différence des bidouilles avec CSS qui n'est pas fait pour cela.
Modifié par Laurent Denis (30 Nov 2005 - 20:46)
si vous avez bien lu ce que j'explique l'idée n'est pas simplement de placer une image sur la page . . et d'inclure un lien par l'intermédiare de l'image
L'idée c'est simplement que l'image soit la page ou la page soit l'image, en sorte que, quelles que soient les dimensions de l'images, de préférence plus grande que la page . . on puisse cliquer sur celle ci ( avec mais je préfère pour l'instant sans définir de zone ) entraînant le déclenchement du chargement d'une autre page . .

voilà maintenant ça devrait être clair . si ça l'est pas ben relisez . .
Modérateur
ibryd, nous avons tout à fait compris ce que tu veux faire, seulement, quel est l'intérêt que l'image soit une image de fond? Tu peux très bien faire la même chose que tu désire en utilisant une balise img, qui fait partit du contenu.

J'aimerais savoir quel(s) avantage(s) vois-tu à ce que ce soit une image de fond versus une image "img" ? Si ton image est déjà plus grande que la page, ca va donner le même résultat que si c'était une image de fond cliquable. Vois-tu ce que je veux dire ?
a écrit :

J'aimerais savoir quel(s) avantage(s) vois-tu à ce que ce soit une image de fond versus une image "img" ?




ok donc si je resume ça n'ai pas forcément possible à écrire en utilisant uniquement le language html ( sauf avec la balise <img . . ) et sans appel à quelque autre language que ce soit ?

L'avantage d'avoir une image plus grande que la page qui l'affiche . . ben . prévoir peut être que des internautes ont des imenses écrans . ou des résolutions de oufs . .
Entre image de fond et image incluses, visuellement à priori pas de différences, seue la sémantique l'est . .
Exemple : tu as un tiroir et tu as deux options pour ce qui est à l'intérieur .
Soit tu fourres tout ce que tu veux y mettre et ce qui y est déjà sans te soucier de la place puisque une fois fermé, ça reviendra au même ( en apparence )
soit tu " ordonnes " à ta façon, disons que tu places les éléments . .

Bon j'étais en train d'écrire un roman tout ça pour dire que j'aimerais bien faire apparaître mes pages:images de la façon dont je l'ai décrit précédemment
Alors en attendant, je lis les tutoriaux sur css et (x)html pour pouvoir changervoluer
As tu connect aux avantages que je vois à la conception de ces pages ? Smiley cligne
Bon, simplifions.

Voici le code pour une image <img> étendue systématiquement à la dimension de la fenêtre du navigateur : 

<style type="text/css">
<!-- 
body {
margin: 0;
padding: 0;
overflow: hidden;
}
img {
width: 100%;
border: 0;
}
-->
</style>
</head>
<body>
<div><a href="#"><img src="solfor.jpg" width="1280" height="960" alt="page suivante" /></a></div>
</body>


Avantages :
- pas de déformations de l'image (pixelisation en cas de très grand écran, mais inévitable quelque-soit la solution retenue)
- page ayant un sens sans support de CSS ou des images
- page indexable


Et voici le code pour une image d'arrière-plan CSS:

<style type="text/css">
<!-- 
html,body,a {
background-image: url(solfor.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: block;
}
-->
</style>
</head>
<body><div><a href="#"></a></div></body>


Le gain avec la seconde solution est nul à tout points de vue :
- affichage déformé dans diverses résolutions
- aucun moyen de donner une alternative textuelle au lien
- page sans aucun contenu en cas de non support de CSS, lien non cliquable, page non indexable...
Modifié par Laurent Denis (30 Nov 2005 - 21:38)
Modérateur
ibryd a écrit :

ok donc si je resume ça n'ai pas forcément possible à écrire en utilisant uniquement le language html ( sauf avec la balise <img . . ) et sans appel à quelque autre language que ce soit ?


Bon de base, pour faire un lien html, ca prends absolument la balise <a href="..." > ou encore des map area.

ibryd a écrit :

L'avantage d'avoir une image plus grande que la page qui l'affiche . . ben . prévoir peut être que des internautes ont des imenses écrans . ou des résolutions de oufs . .


Oui d'accord, mais ce n'était pas ma question. Je voulais que tu me dise les avantages à utiliser une image de fond plutôt qu'une image de contenu (img).


ibryd a écrit :

Entre image de fond et image incluses, visuellement à priori pas de différences, seule la sémantique l'est...


Bon, s'il faut parler sémantique, j'ai une question pour toi. L'image que tu présente à l'internaute, est-ce uniquement à titre décoratif, ou bien ce que tu présente est un contenu intéressant pour le visiteur, comme la présentation d'une oeuvre que tu as réalisé, une photo que tu as prise, comme un diaporama photo ? Si tu réponds que c'est du contenu, alors pas la peine de se poser milles questions, utilise la balise img avec un bon vieux a. C'est ce qui est le plus logique.

ibryd a écrit :

Bon j'étais en train d'écrire un roman tout ça pour dire que j'aimerais bien faire apparaître mes pages:images de la façon dont je l'ai décrit précédemment


Oui mais je répète ma question. POURQUOI ? Pourquoi faut-il absolument que ce soit une image de fond ? Je n'ai toujours pas vu la réponse à ma question. Pourquoi tiens-tu a ce que ce soit une image de fond, et non une image img.

ibryd a écrit :

As tu connect aux avantages que je vois à la conception de ces pages ? Smiley cligne


Pas compris, désolé. Smiley confus

a+
Modifié par Tony Monast (30 Nov 2005 - 21:36)
la répone peut être ne te satisfait pas entièrement
a écrit :


ibryd a écrit :

L'avantage d'avoir une image plus grande que la page qui l'affiche . . ben . prévoir peut être que des internautes ont des imenses écrans . ou des résolutions de oufs . .



Oui d'accord, mais ce n'était pas ma question. Je voulais que tu me dise les avantages à utiliser une image de fond plutôt qu'une image de contenu (img).


mais elle en est une, il est vrai qu'il peut paraître absurde et non "logique" de charger des images plus grandes que la page qui les affiche mais cela entre dans la volonté de la "politque " du site et de l'organisation du contenu

je vois l'image de fond pas simplement en temps que " décoratif " mais bien en temps que contenu
Tel un diaporama à l'intérieur du site à la manière d'une transition visuelle entre deux thèmes
A terme, je prévoie l'utilisation de map area pour certaines de ces pages dit " vides " ne contenant que le body background . . alors si il était possible de définir des positions de surfaces sur l'image dite de "fond "
enfin je le répète, je débute pour le solfège informatique, après la clé de sol ( html ) je me lance pour la clé de fa (css ), y reste encore des notes à apprendre . . pour faire de l'harmonie et de l'impro !!
Modérateur
ibryd a écrit :

mais elle en est une, il est vrai qu'il peut paraître absurde et non "logique" de charger des images plus grandes que la page qui les affiche mais cela entre dans la volonté de la "politque " du site et de l'organisation du contenu


Encore une fois, tu te trompe sur ma question. Oublis la taille des images, là n'est pas mon questionnement. Qu'elle soit petite ou grande, ca m'importe peu dans le cas présent. C'est au sujet de pourquoi une image de fond sur le body plutôt qu'une image DANS le body. Smiley sweatdrop

ibryd a écrit :

je vois l'image de fond pas simplement en temps que " décoratif " mais bien en temps que contenu


Alors présente-le comme tel, choisis la première solution que Laurent Denis te propose, avec une balise a et une balise img.

ibryd a écrit :

A terme, je prévoie l'utilisation de map area pour certaines de ces pages dit " vides " ne contenant que le body background


Les map area sont destinés aux images (img), pas aux images de fond. Si tu utilise une image de fond, d'abord, cela va apporter de nombreux désavantages au niveau du site (accessibilité, compatibilité - voir ce que Laurent Denis a expliqué), et te compliquer les choses pour les faire.

Je pense que tu devrais oublier l'idée d'utiliser une image de fond. Décroche un peu, et essaye plutôt avec une image img. Si tu rencontre des problèmes, tu viens nous voir, et nous allons pouvoir t'aider.

Je répète une dernière fois ma question : quel avantage vois-tu à utiliser une image de fond plutôt qu'une image de contenu (img) (et là je ne parles pas du tout de la taille de l'image).


Smiley ohwell
Modifié par Tony Monast (30 Nov 2005 - 22:00)
ibryd a écrit :
je vois l'image de fond pas simplement en temps que " décoratif " mais bien en temps que contenu


Dans ce cas, il faut bien comprendre que c'est justement HTML (<img>) qui a pour rôle de définir le contenu. CSS ne définit et ne crée pas de contenu. Uniquement de la décoration.
Bon, une dernière fois je réponds, sur ce sujet :
a écrit :
quel avantage vois-tu à utiliser une image de fond plutôt qu'une image de contenu (img) (et là je ne parles pas du tout de la taille de l'image).

Changer la donne . . : utiliser l'image de fond EN TANT que contenu, pour l'internaute ça reviendra peut être au même et pour des créateurs également ( mais seulement en apparence ) mais il verras peut être certaines pages qu'il visitera sous un autre oeil .
Effectivement/évidemment c'est un argument personnel auquel tu/vous n'adhère(z) pas forcément. .

Smiley cligne
Du moins, à la base ce que je demandais c'"est si c'était techniquement possible sans ou en utilisant les languages dont on dispose actuellement .
ibryd a écrit :

Changer la donne . . : utiliser l'image de fond EN TANT que contenu, pour l'internaute ça reviendra peut être au même et pour des créateurs également ( mais seulement en apparence ) mais il verras peut être certaines pages qu'il visitera sous un autre oeil .


L'internaute ignore totalement s'il s'agit d'une image d'arrière-plan ou d'une image HTML. En revanche, il ne pourra pas ignorer les images css déformées, les pages inaccessibles, la technique mal employée qui ne marche pas quand on veut l'utiliser à l'envers. Le créateur non plus, ne pourra pas l'ignorer, je l'espère.

Il n'y a pas de réelle créativité sans maîtrise des données et des contraintes techniques de base.

ibryd a écrit :

Du moins, à la base ce que je demandais c'"est si c'était techniquement possible sans ou en utilisant les languages dont on dispose actuellement .


Voir ci-dessus : c'est techniquement possible, pour un résultat défectueux.
Salut,

Sans compter que ton image de fond pèse 334 Ko et qu'avec un 56K pas trop faché, c'est 100 s pour la charger.

Il a déjà longtemps que je suis parti
a écrit :
Sans compter que ton image de fond pèse 334 Ko et qu'avec un 56K pas trop faché, c'est 100 s pour la charger.


je vais y remedier

a écrit :
Il n'y a pas de réelle créativité sans maîtrise des données et des contraintes techniques de base.

pas nécessairement, seulement la maîtrise des données et techniques ( parfois contraignantes ) de base aide, nul besoin d'être un dictionnaire pour créer mais il est vrai que la maîtrise des éléments . .etc de base aide

On peu créer ( et artistiquement ) avec seulement la base élémentaire ( des connaissances )
Pages :
Sujet clos
Aller à