html5 image

[olympiquega]

Bonjour, je suis en train de créer mon premier site et je rencontre un problème.
J'aimerai, sur ma page d'accueil, mettre en "photo-lien" (image de la page vers laquelle je veux que la photo-lien) me redirige .
J'ai réussi à insérer une image et à intégrer un lien de redirection mais j'aimerai pour ajouter du texte sur l'image cliquable et je ne trouve pas comment faire...
Voici mon code si cela peut vous aider, pour info ce n'est qu'un test et j'aimerai juste afficher aymeric laporte sur mon image-lien.

merci d'avance
-----

[invite948b37db]

j'aimerai pour ajouter du texte sur l'image cliquable et je ne trouve pas comment faire...

Bonsoir
Tu veux un texte qui s'affiche au survol de l'image par le curseur de la souris ?

[olympiquega]

en fait j'ai réussi !!
par contre je rencontre plusieurs soucis d'affichage de mon site:
1. Quand je rétrécis la page (donc plus en plein écran) ca chamboule tout mon site: que faire
2. Quant une barre de téléchargement s'affiche en bas de l'écran et le fait "remonter" la aussi ca bouge tout sur mon site: que faire
3. Sous chrome tout s'affiche bien mais dès que je passe sous internet explorer ca s'affiche n'importe comment: que faire?
Merci d'avance

[invite948b37db]

en fait j'ai réussi !!

Puisque tu as posé une question et qu'une bonne volonté s'est manifestée, la courtoisie voudrait que tu indiques comment tu as fait !

3. Sous chrome tout s'affiche bien mais dès que je passe sous internet explorer ca s'affiche n'importe comment: que faire?

Et sur smartphone, ça fonctionne comment ?
J'ai vu dans ton message initial que tu faisait appel à des classes nommées ce qui suppose l'existence d'une CSS (feuille de style). C'est là que ça se joue. Si tu prédéfinis des dimensions de DIV par exemple, il vaut mieux le faire en pourcentage plutôt qu'en unité (pixel ou mm).
A voir aussi si tu n'utilises pas de balise non reconnue par IE. Microsoft est très pénible avec son habitude de créer ses propres balises et d'ignorer certains standards.

Si tu n'arrives pas à résoudre ce problème ou si la solution est trop compliquée, tu peux aussi mettre une tout petit Javascript qui détecte le navigateur du visiteur et qui charge la CSS que tu auras préalablement adaptée à ce navigateur.

[A voir en vidéo sur Futura]

[olympiquega]

oui en effet!
alors en fait je voulais avoir une image lien sur ma page d'accueil et lorsque la souris passe dessus le lien "s'éclaire".
J'ai donc jouer sur l'opacité ce qui donne un beau résultat !
Ah oui je n'y avais pas pensé, je vais tout passer en pourcentages merci !!

[JPL]

3. Sous chrome tout s'affiche bien mais dès que je passe sous internet explorer ca s'affiche n'importe comment: que faire?

Et tu es surpris ?

[olympiquega]

je sais pas c'est pour ca que je viens demander de l'aide !
je suis totalement débutant en html...
merci de le comprendre

[CM63]

Bonjour,

Ne t'occupe de Internet Explorer, fait en sorte que ton truc marche sous les navigateurs qui respectent les normes, et ne t'occupe pas de ceux qui ne les respectent pas (pour ne pas dire "celui").

[olympiquega]

D'accord, mais je sais que plusieurs personnes refusent de quitter IE donc si il existe un moyen de corriger les problèmes j'aimerai le connaître !
Merci de ta réponse en tout cas

[invite948b37db]

D'accord, mais je sais que plusieurs personnes refusent de quitter IE donc si il existe un moyen de corriger les problèmes j'aimerai le connaître !

Bonne réponse car l'auteur d'un site n'a pas à porter de jugement sur les outils de ses visiteurs. C'est à lui de s'adapter. Je sais que c'est devenu très difficile avec la diversité des appareils et logiciels aujourd'hui en usage mais c'est ainsi !
Pour les solutions, je t'ai donné des pistes.

[olympiquega]

effectivement.
Malheureusement je ne connais pas du tout le langage java, je vais donc m'y mettre !!
Merci de ta réponse

[invite948b37db]

Erreur d'aiguillage !

[invite948b37db]

effectivement.
Malheureusement je ne connais pas du tout le langage java, je vais donc m'y mettre !!
Merci de ta réponse

Je n'ai pas parlé de Java mais de Javascript ce qui est très différent.
Pour commencer, ll faudrait identifier ce qui pose problème et essayer de le résoudre ou de le contourner.
C'est seulement si on n'y parvient pas qu'il faudra passer par un script JS.
Le problème vient de ta CSS. Montre-nous ton code.

[olympiquega]

heu il est très long (180 lignes) donc je peux pas le mettre en image et je sais pas comment ajouter un lien ...

[invite948b37db]

Il faut copier-coller le code ici. Ensuite, ll faut sélectionner et cliquer sur l’icône code ou dièse ci-dessus dans la barre des outils.

[olympiquega]

body
{
	background-color: #C0C3C4;

	
	
	z-index: 0;
}

.logo
{
		position: absolute;
		left: 5%;
		top: 5%;
	}
header
{
	background-color: white;
	position: absolute;
	left: 450px;
	right: 450px;
	top: 0px;
	bottom: 800px;
	}
section
{
	background-color: white;
	position: absolute;
	left: 23.64%;
	right: 23.64%;
	top: 145px;
	bottom:-300px;
}
nav
{
	background-color: #3E3F40;
	position: absolute;
	left: 50px;
	right: 50px;
	top: 105px;
	bottom: 940px;
	

}
.accueil
{
	color: white;
	position: absolute;
	left: 50px;
}

.Joueurs
{
	color: white;
	position: absolute;
	left: 150px;
}
.Actualité
{
	color: white;
	position: absolute;
	left: 360px;
}

.articles
{
	color: white;
	position: absolute;
	left: 580px;
}
.art1
{
  background-color: grey;
  position: absolute;
  left: 0px;
  right: 350px;
  top: 00px;
  bottom: 220px;
  z-index: 5;
  overflow: hidden;
}
.dernierespubli
{
	color: black;
	position: absolute;
	left: 90px;
	top: 230px;
	z-index: 12;
}
.art2
{
  background-color: grey;
  position: absolute;
  left: 557px;
  right: 0px;
  top: 0px;
  bottom: 220px;
  z-index: 5
}
.art3
{
  background-color: grey;
  position: absolute;
  left: 0px;
  right: 550px;
  top: 250px;
  bottom: 110px;
  z-index: 5
}
.art4
{
  background-color: grey;
  position: absolute;
  left: 0px;
  right: 550px;
  top: 360px;
  bottom: 0px;
  z-index: 5
}
.art5
{
  background-color: grey;
  position: absolute;
  left: 357px;
  right: 300px;
  top: 250px;
  bottom: 0px;
  z-index: 5
}
.publi
{
background-color: white;
position: absolute;
left: 500px;
right: 500px;
top: 450px;
bottom: 30px;
z-index: 4;
}
.art6
{
  background-color: grey;
  position: absolute;
  left: 607px;
  right: 0px;
  top: 250px;
  bottom: 110px;
  z-index: 5
}
.art7
{
  background-color: grey;
  position: absolute;
  left: 607px;
  right: 0px;
  top: 360px;
  bottom: 0px;
  z-index: 5
}

.laporte
{
	color: white;
	position: absolute;
	left: 550px;
	top: 600px;
	z-index: 14;
	text-decoration:none;
}
a:visited
{
	color: white;
}

a:hover
{
	color: grey;
	opacity: 14.5;
}
.test
{
	
	opacity: 0.4;
	z-index: 13;
}
a:link
{
	color: white;
	text-decoration: none;
}
footer
{
	position: absolute;
	bottom: -500px;
	top:1200px;
	left: 0px;
	right: 0px;
	background-color: white;
	color: black;
	border: 3px #C0C3C4 solid;
	border-radius: 10px
}
.logo1
{
	position: absolute;
	left: 450px;
	bottom: 100px;
}
.contact
{
	color: black;
	position: absolute;
	left: 800px;
	bottom: 180px;
	text-decoration: underline;

	
}
.cours
{
	color: black;
	position: absolute;
	left: 1200px;
	bottom: 180px;
	text-decoration: underline;

	
}
.liencouleur1
{
	color: black;
	position: absolute;
	left: 1200px;
	bottom: 140px;
	font-size: 1.4em;
}

.liencouleur3
{
	color: black;
	position: absolute;
	left: 800px;
	bottom: 140px;
	font-size: 1.4em;
}

[invite948b37db]

Je n'ai pas lu ta CSS dans le détail mais je ne vois pas d'élément conteneur. Ce n'est pas obligatoire mais c'est sécurisant surtout avec IE. Quand tu définis une position absolue, IE se réfère à l'élément parent, donc le conteneur si il existe. Si il n'existe pas, il semble [mais je n'en suis pas absolument sûr]que IE se réfère à l'élément précédant. Dans ce cas, la position absolue indiquée dans la CSS n'est plus le coin supérieur gauche de l'écran mais le coin inférieur gauche du dernier élément affiché.

Un conteneur, c'est par exemple une DIV qui prend 100% de l'écran. Tu l'appelle au début du code HTML et tu la ferme seulement à la fin du code HTML. Ainsi, tous les autres éléments CSS seront contenus dans la DIV principale.

[olympiquega]

j'ai mis une div qui englobe tout le code html, et en css j'ai mis cette div en position absolue avec left0% right 0% top 0% et botom 0% ?
Est ce que j'ai fait la bonne chose ?
si c'set le cas ca ne marche toujours pas mieux !

[invite948b37db]

j'ai mis une div qui englobe tout le code html, et en css j'ai mis cette div en position absolue avec left0% right 0% top 0% et botom 0% ?
Est ce que j'ai fait la bonne chose ?
si c'set le cas ca ne marche toujours pas mieux !

Ca va être fastidieux mais je ne vois pas d'autre solution :
mets une bordure à la DIV conteneur afin de voir comment elle se positionne (border-width:1px). Tu l’enlèvera quand tu auras réglé tes problèmes.
Ensuite créé une page html de test et teste-la avec un seul élément enfant dans le conteneur, puis deux, puis trois Etc. Mets aussi des bordures à ces éléments enfants.
En procédant ainsi, tu vas détecter le moment où ça délire !

[olympiquega]

D'accord, merci

[invite3a787c83]

<img src="smiley.gif" alt="Smiley face" height="42" width="42">


Definition and Usage :

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.