Partage

Integrer image dans une page HTML

11 novembre 2023 à 15:42:02

Bonjour,

J'ai une page html avec plusieurs boutons qui m'affiche les images que je souhaitent .

Seulement j'ai quelque "boutons" avec des pages vides et j'aimerai intégrer des images dans ces boutons, je remarque que dans le fichier HTML les images que j'ai sur ma page ne sont pas link mais apparaissent dans un dossier à cote du html.

J'ai réussi à remplacer des images qui étaient dans le dossier mais je souhaiterai en intégrer des nouvelles " aux boutons qui sont vide "'

Je suis un noob dans le domaine .

Merci d'avance.

Bonjour,

merci de votre réponse.

le code se compose ainsi

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                font-family: Segoe UI;
            }
            #image {
                height: 500px; 
                float: left;
				width: 500px;
            }			
            #threeh {
                float: left; 
            }		
            #hu {
                float: left; 
				margin-left: 15px;
				background-color: lightyellow;
            }
            #image2 {
				height: 500px; 
                float: right;
				width: 500px;
            } 
			#thead {
			}
			
			table {
				border-spacing: 20px 3px;
			}
			th {
				width: 95px;
				padding: 8px;
				background-color: #F4B066;
				border-radius: 15px;
				border: 1px solid black;
			}
			td {
			padding: 5px;
			text-align: center;
			background-color: #F4B066;
			
			
			border-radius: 15px;
			border: 1px solid black;

			}
			caption {
			font-family: sans-serif;
			}
			#blue
			{
				background-color: #71AADE;
			}
			#green
			{
				background-color: #96C37B;
			}
			#lightgreen
			{
				background-color: #DAEAD2;
			}
			#red
			{
				background-color: #DC6463;
			}
			#lightred
			{
				background-color: #E79898;
			}
			#lightgrey
			{
				background-color: #CCCCCC;
			}
			#logo
			{
				position: absolute;
				left: 0px;
				bottom: 0px;
			}
			.OS
			{
				background-image: url('png/OS.png');
				background-repeat: no-repeat;
				background-position: right bottom;
				
			}
			
			img[alt]:after {  
				  display: block;
				  position: absolute;
				  top: 0;
				  left: 0;
				  width: 100%;
				  height: 100%;
				  background-color: #fff;
				  font-family: 'Helvetica';
				  font-weight: 300;
				  line-height: 2;  
				  text-align: center;
				  content: attr(alt);
				}

        </style>
        <title>RANGES SPIN ELITE</title>
    </head>
    	<body>
		<div id="threeh">
        <table>
            <thead>
				<tr>
					<th  colspan="4">HEADS UP</th>
					<th  colspan="10">3-WAY</th>
					<th  colspan="4">BvB</th>
				</tr>
				<tr>
					<th id="blue" onclick="changeRange('HU SB')">HU SB</th>
					<th id="red" onclick="changeRange('HU BB vs L')">HU BB vs L</th>
					<th id="red" onclick="changeRange('HU BB vs MR')">HU BB vs MR</th>
					<th id="red" class="OS" onclick="changeRange('HU BB vs OS')">HU BB vs OS</th>
					<th id="green" onclick="changeRange('BTN vs SB')">BTN vs SB</th>
					<th id="green" onclick="changeRange('BTN vs BB')">BTN vs BB</th>
					<th id="blue" onclick="changeRange('SB vs BTN L')">SB vs BTN L</th>
					<th id="blue" onclick="changeRange('SB vs BTN MR')">SB vs BTN MR</th>
					<th id="blue" class="OS"  onclick="changeRange('SB vs BTN OS')">SB vs BTN OS</th>
					<th id="red" onclick="changeRange('BB vs BTN L')">BB vs BTN L</th>
					<th id="red" onclick="changeRange('BB vs BTN MR')">BB vs BTN MR</th>
					<th id="red" onclick="changeRange('BB vs 2')">BB vs 2</th>
					<th id="red" class="OS"  onclick="changeRange('BB vs BTN OS')">BB vs BTN OS</th>
					<th id="red" class="OS"  onclick="changeRange('BB vs BTN OS & SB C')">BB vs 2 OS</th>
					<th id="blue" onclick="changeRange('SB vs BB')">SB vs BB</th>
					<th id="red" onclick="changeRange('BB vs SB L')">BB vs SB L</th>
					<th id="red" onclick="changeRange('BB vs SB OR')">BB vs SB OR</th>
					<th id="red" class="OS"  onclick="changeRange('BB vs SB OS')">BB vs SB OS</th>
				</tr>
				<tr>
					<th onclick="changeDepth('20-25')">20-25</td>
					<th onclick="changeDepth('16-19')">16-19</td>
					<th onclick="changeDepth('13-15')">13-15</td>
					<th onclick="changeDepth('11-12')">11-12</td>
					<th onclick="changeDepth('10')">10</td>
					<th onclick="changeDepth('9')">9</td>
					<th onclick="changeDepth('7-8')">7-8</td>
					<th onclick="changeDepth('5-6')">5-6</td>
					<th onclick="changeDepth('4-')">4-</td>
				</tr>
			</thead>	
				<tbody>
				<span id="U3BpbiBFbGl0ZSBSYW5nZXMgbWFkZSBieSBQYWQ="></span>				
				<tr>
					<td style="visibility:hidden;"></td>
					<td id = "lightred" colspan="2"><b>VS REGS</b></td>
					<td id = "td_range" colspan="2"><span id="range"></span></td>
					<td id = "td_depth"><span id="depth"></span></td>
					<td style="visibility:hidden;"></td>
					<td style="visibility:hidden;"></td>
					<td style="visibility:hidden;"></td>
					<td id = "lightgreen" colspan="2"><b>EXPLOIT</b></td>
					<td id = "td_range2" colspan="2"><span id="range2"></span></td>
					<td id = "td_depth2"><span id="depth2"></span></td>
				</tr>
				<tr>
					<td style="visibility:hidden;"></td>
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image"></div>
						</div>
					</td>
					<td style="background-color:white; border:none;" colspan="2">
						<div id="clear">
							<div id="legend"></div>
						</div>
					</td>
					
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image2"></div>
						</div>
					</td>
					
				</tr>
				<tr>
					<td style="visibility:hidden;"></td>
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image_alt"></div>
						</div>
					</td>
					<td style="background-color:white; border:none;" colspan="2">
						<div id="clear">
							<div ></div>
						</div>
					</td>
					
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image2_alt"></div>
						</div>
					</td>
					
				</tr>
        </tbody></table>
		</div>
		
		


<script>
var range = "HU SB";
var depth = "20-25";
setTitle();

function changeRange(newrange) {
	range = newrange;
	loadImage();
}
function changeMode(newmode) {
	mode = newmode;
	loadImage();
}
function changeDepth(newdepth) {
	depth = newdepth;
	loadImage();
}
function loadImage() {
	if(range.slice(-2)=='OS' || range=='BB vs BTN OS & SB C'){
		tmp=depth;
		depth='';
	}
	src = "png/VS REGS_" + range + "_" + depth+".png";
	src2 = "png/EXPLOIT_" + range + "_" + depth+".png";
	src_alt = "png/VS REGS_" + range + "_" + depth+"_alt.png";
	src2_alt = "png/EXPLOIT_" + range + "_" + depth+"_alt.png";
	src_legend = "legend/"+range+".png";

	document.getElementById("image").innerHTML = "<img src='"+src+"' />";	
	document.getElementById("legend").innerHTML = "<img src='"+src_legend+"'/>"; 
	document.getElementById("image2").innerHTML = "<img src='"+src2+"' />";
	//document.getElementById("image_alt").innerHTML = "<img src='"+src_alt+"' onerror=\"hideImg('image_alt')\"/>";	
	document.getElementById("image2_alt").innerHTML = "<img src='"+src2_alt+"' onerror=\"hideImg('image2_alt')\"/>";
	
	
	setTitle();
	if(range.slice(-2)=='OS' || range=='BB vs BTN OS & SB C'){depth=tmp;}
	
	document.getElementById('image2_alt').style.display = "";
}

function setTitle() {
	color_range = range.slice(0,5)=='HU SB' || range[0]=='S' ? '#71AADE' : range.slice(0,3)=='BTN' ? '#96C37B' : '#DC6463';
	
	document.getElementById("range").innerHTML = "<b>"+range+"</b>";
	document.getElementById("td_range").style.background = color_range;
	document.getElementById("depth").innerHTML = "<b>"+depth+"</b>";
	
	document.getElementById("range2").innerHTML = "<b>"+range+"</b>";
	document.getElementById("td_range2").style.background = color_range;
	document.getElementById("depth2").innerHTML = "<b>"+depth+"</b>";
}

function hideImg(id) {
        document.getElementById(id)
                          .style.display = "none";
       }

</script>
<div id="logo" class="logo" ><img src="png/logo_se_mini.png" /></div>
</body></html>

Le document ressemble à ca

et mes images sont reliées a ces boutons

Merci d'avance

AbcAbc6

11 novembre 2023 à 19:38:06

Bonsoir,

Je ne comprends pas "j'ai quelque "boutons" avec des pages vides"!! que voulez vous dire par la?

Poster le code que vous avez écrit en utilisant le bouton code </> de la barre d'outil du forum.

La hiérarchie des fichiers de votre projet pourrait également nous aider à comprendre.

Newbie94

13 novembre 2023 à 11:12:50

Bonjour,

merci de votre réponse, le code se compose ainsi.

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                font-family: Segoe UI;
            }
            #image {
                height: 500px; 
                float: left;
				width: 500px;
            }			
            #threeh {
                float: left; 
            }		
            #hu {
                float: left; 
				margin-left: 15px;
				background-color: lightyellow;
            }
            #image2 {
				height: 500px; 
                float: right;
				width: 500px;
            } 
			#thead {
			}
			
			table {
				border-spacing: 20px 3px;
			}
			th {
				width: 95px;
				padding: 8px;
				background-color: #F4B066;
				border-radius: 15px;
				border: 1px solid black;
			}
			td {
			padding: 5px;
			text-align: center;
			background-color: #F4B066;
			
			
			border-radius: 15px;
			border: 1px solid black;

			}
			caption {
			font-family: sans-serif;
			}
			#blue
			{
				background-color: #71AADE;
			}
			#green
			{
				background-color: #96C37B;
			}
			#lightgreen
			{
				background-color: #DAEAD2;
			}
			#red
			{
				background-color: #DC6463;
			}
			#lightred
			{
				background-color: #E79898;
			}
			#lightgrey
			{
				background-color: #CCCCCC;
			}
			#logo
			{
				position: absolute;
				left: 0px;
				bottom: 0px;
			}
			.OS
			{
				background-image: url('png/OS.png');
				background-repeat: no-repeat;
				background-position: right bottom;
				
			}
			
			img[alt]:after {  
				  display: block;
				  position: absolute;
				  top: 0;
				  left: 0;
				  width: 100%;
				  height: 100%;
				  background-color: #fff;
				  font-family: 'Helvetica';
				  font-weight: 300;
				  line-height: 2;  
				  text-align: center;
				  content: attr(alt);
				}

        </style>
        <title>RANGES SPIN ELITE</title>
    </head>
    	<body>
		<div id="threeh">
        <table>
            <thead>
				<tr>
					<th  colspan="4">HEADS UP</th>
					<th  colspan="10">3-WAY</th>
					<th  colspan="4">BvB</th>
				</tr>
				<tr>
					<th id="blue" onclick="changeRange('HU SB')">HU SB</th>
					<th id="red" onclick="changeRange('HU BB vs L')">HU BB vs L</th>
					<th id="red" onclick="changeRange('HU BB vs MR')">HU BB vs MR</th>
					<th id="red" class="OS" onclick="changeRange('HU BB vs OS')">HU BB vs OS</th>
					<th id="green" onclick="changeRange('BTN vs SB')">BTN vs SB</th>
					<th id="green" onclick="changeRange('BTN vs BB')">BTN vs BB</th>
					<th id="blue" onclick="changeRange('SB vs BTN L')">SB vs BTN L</th>
					<th id="blue" onclick="changeRange('SB vs BTN MR')">SB vs BTN MR</th>
					<th id="blue" class="OS"  onclick="changeRange('SB vs BTN OS')">SB vs BTN OS</th>
					<th id="red" onclick="changeRange('BB vs BTN L')">BB vs BTN L</th>
					<th id="red" onclick="changeRange('BB vs BTN MR')">BB vs BTN MR</th>
					<th id="red" onclick="changeRange('BB vs 2')">BB vs 2</th>
					<th id="red" class="OS"  onclick="changeRange('BB vs BTN OS')">BB vs BTN OS</th>
					<th id="red" class="OS"  onclick="changeRange('BB vs BTN OS & SB C')">BB vs 2 OS</th>
					<th id="blue" onclick="changeRange('SB vs BB')">SB vs BB</th>
					<th id="red" onclick="changeRange('BB vs SB L')">BB vs SB L</th>
					<th id="red" onclick="changeRange('BB vs SB OR')">BB vs SB OR</th>
					<th id="red" class="OS"  onclick="changeRange('BB vs SB OS')">BB vs SB OS</th>
				</tr>
				<tr>
					<th onclick="changeDepth('20-25')">20-25</td>
					<th onclick="changeDepth('16-19')">16-19</td>
					<th onclick="changeDepth('13-15')">13-15</td>
					<th onclick="changeDepth('11-12')">11-12</td>
					<th onclick="changeDepth('10')">10</td>
					<th onclick="changeDepth('9')">9</td>
					<th onclick="changeDepth('7-8')">7-8</td>
					<th onclick="changeDepth('5-6')">5-6</td>
					<th onclick="changeDepth('4-')">4-</td>
				</tr>
			</thead>	
				<tbody>
				<span id="U3BpbiBFbGl0ZSBSYW5nZXMgbWFkZSBieSBQYWQ="></span>				
				<tr>
					<td style="visibility:hidden;"></td>
					<td id = "lightred" colspan="2"><b>VS REGS</b></td>
					<td id = "td_range" colspan="2"><span id="range"></span></td>
					<td id = "td_depth"><span id="depth"></span></td>
					<td style="visibility:hidden;"></td>
					<td style="visibility:hidden;"></td>
					<td style="visibility:hidden;"></td>
					<td id = "lightgreen" colspan="2"><b>EXPLOIT</b></td>
					<td id = "td_range2" colspan="2"><span id="range2"></span></td>
					<td id = "td_depth2"><span id="depth2"></span></td>
				</tr>
				<tr>
					<td style="visibility:hidden;"></td>
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image"></div>
						</div>
					</td>
					<td style="background-color:white; border:none;" colspan="2">
						<div id="clear">
							<div id="legend"></div>
						</div>
					</td>
					
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image2"></div>
						</div>
					</td>
					
				</tr>
				<tr>
					<td style="visibility:hidden;"></td>
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image_alt"></div>
						</div>
					</td>
					<td style="background-color:white; border:none;" colspan="2">
						<div id="clear">
							<div ></div>
						</div>
					</td>
					
					<td style="background-color:white; border:none;" colspan="6">
						<div id="clear">
							<div id="image2_alt"></div>
						</div>
					</td>
					
				</tr>
        </tbody></table>
		</div>
		
		


<script>
var range = "HU SB";
var depth = "20-25";
setTitle();

function changeRange(newrange) {
	range = newrange;
	loadImage();
}
function changeMode(newmode) {
	mode = newmode;
	loadImage();
}
function changeDepth(newdepth) {
	depth = newdepth;
	loadImage();
}
function loadImage() {
	if(range.slice(-2)=='OS' || range=='BB vs BTN OS & SB C'){
		tmp=depth;
		depth='';
	}
	src = "png/VS REGS_" + range + "_" + depth+".png";
	src2 = "png/EXPLOIT_" + range + "_" + depth+".png";
	src_alt = "png/VS REGS_" + range + "_" + depth+"_alt.png";
	src2_alt = "png/EXPLOIT_" + range + "_" + depth+"_alt.png";
	src_legend = "legend/"+range+".png";

	document.getElementById("image").innerHTML = "<img src='"+src+"' />";	
	document.getElementById("legend").innerHTML = "<img src='"+src_legend+"'/>"; 
	document.getElementById("image2").innerHTML = "<img src='"+src2+"' />";
	//document.getElementById("image_alt").innerHTML = "<img src='"+src_alt+"' onerror=\"hideImg('image_alt')\"/>";	
	document.getElementById("image2_alt").innerHTML = "<img src='"+src2_alt+"' onerror=\"hideImg('image2_alt')\"/>";
	
	
	setTitle();
	if(range.slice(-2)=='OS' || range=='BB vs BTN OS & SB C'){depth=tmp;}
	
	document.getElementById('image2_alt').style.display = "";
}

function setTitle() {
	color_range = range.slice(0,5)=='HU SB' || range[0]=='S' ? '#71AADE' : range.slice(0,3)=='BTN' ? '#96C37B' : '#DC6463';
	
	document.getElementById("range").innerHTML = "<b>"+range+"</b>";
	document.getElementById("td_range").style.background = color_range;
	document.getElementById("depth").innerHTML = "<b>"+depth+"</b>";
	
	document.getElementById("range2").innerHTML = "<b>"+range+"</b>";
	document.getElementById("td_range2").style.background = color_range;
	document.getElementById("depth2").innerHTML = "<b>"+depth+"</b>";
}

function hideImg(id) {
        document.getElementById(id)
                          .style.display = "none";
       }

</script>
<div id="logo" class="logo" ><img src="png/logo_se_mini.png" /></div>
</body></html>

Voici un extrait de la page, les iamges sont reliées a des boutons comme ceux ci

Merci d'avance

AbcAbc6

13 novembre 2023 à 15:49:04

Bonjour,

Je sort ce sujet des spams.Si cela arrive encore vous pouvez poster dans ce sujet Si votre message est considéré comme spam

Beaucoup d’erreurs que vous pouvez voir en passant votre code au validateur => https://validator.w3.org

Un identifiant est unique dans le document, vous ne pouvez avoir plusieurs id="red" si c’est pour styliser plusieurs éléments utiliser les class en CSS.

On n’utilise pas les tableaux pour la mise en page. Je ne vois pas ici un tableau à double entrées.

La balise <th> sert d’entête au tableau et la balise <td> sert de cellule. Vous avez une non concordance dans vos balises, vous en ouvrez certaine avec <th> et fermer avec </td>, cela ne vas pas. Soit c’est une entête soit une cellule mais pas les deux en même temps !!!!!

La balise <span> ne peut être à cet endroit, en effet elle ne fait pas partie des balises de tableau, donc elle doit être dans une balise <td>.

La balise <img> ne sort jamais sans son attribut alt obligatoire.

En CSS

N’utilisez pas de width :100% ; sur un élément positionner utilisez right :0 ; et left :0 ; Lire https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

En JS

Depuis ECMAScript 2015 (ES6) il existe de nouveau mot clés pour déclarer les variables c’est let et const qui limite la variable à la portée dans le bloc dans lequel elle est déclarée. Vous éviterez le hoistingLire https://developer.mozilla.org/fr/docs/Glossary/Hoisting

Ne mélanger pas le HTML et le JS, l’usage de l’attribut onclick est d’un autre temps. Utiliser des écouteur d’événement soit addEventListener Lire https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener et https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#les_gestionnaires_d%C3%A9v%C3%A9nements_en_ligne_ne_les_utilisez_pas_!

-------

Après correction de tout ceci si vous avez encore des difficultés reposter votre code.

Je n’ai pas bien compris la problématique, si c’est du JS je déplacerais le sujet dans le bon forum.

Puisque vous avez des images, si votre code n’est pas en ligne, vous pourriez poster votre projet compet via un service d’upload de fichier de votre choix. Je vous propose https://wetransfer.com/ (cliquer sur les trois petit points et sélectionner « obtenir un lien de transfert » et copier le ici)

-
Edité par AbcAbc6 13 novembre 2023 à 15:52:12

Newbie94

14 novembre 2023 à 14:40:10

Bonjour,

Merci de votre réponse.

Ce n'est pas moi qui ai codé ce petit fichier, je cherche juste à rajouter des informations dans le fichier.

Je ne peux pas me permettre de poster le projet complet.

Admettons que quand on clique sur "4" : cf l'image que j'ai posté au dessus, j'aimerai qu'une image apparaisse , étant donné que ce bouton n'est relié à aucune image.

Je ne pense pas qu'il y ai du JS dans ce document, quand j'extrait le document, il y a le html que j'ai posté ici, un fichier PNG répertoriant toutes les images qui sont déja relié au document et un fichier legende.

j'ai remplacé certaine image à la racine dans le dossier PNG, mais si je souhaite en intégrer des nouvelles à des boutons qui sont vides pour le moment, que dois-je faire, c'est justement ma problématique...

PS: je ne cherche pas à améliorer le code ou autre bien que celui ci ne soit pas fait dans les règles de l'art d'après vous, ce n'est pas mon domaine de compétence, je n'arrive déja pas à ajouter une image au document si je commence à vouloir refaire le code çà risque d'étre compliqué..

Merci

-
Edité par Newbie94 14 novembre 2023 à 14:42:49

AbcAbc6

18 novembre 2023 à 0:47:48

Bonjour, Désolé pour ma réponse tardive,

>> Ce n'est pas moi qui ai codé ce petit fichier, je cherche juste à rajouter des informations dans le fichier.

Rapprochez-vous de la personne qui à coder ce fichier avec les pieds, il est truffé d'erreurs, il faut d'abord les corriger.

Vous ne pouvez pas construire une maison si les fondations ne sont pas solide.

>> Je ne pense pas qu'il y ai du JS dans ce document, quand j'extrait le document, il y a le html que j'ai posté ici,

Tout ce qui est entre les balises <script> et </script> c'est du JavaScript.

Si ce n'est pas votre domaine de compétence je vous recommande de vous former. Il y a des cours HTML/CSS JS sur ce site, vous aurez la base pour faire ce que vous souhaitez et surtout corriger les erreurs du code poster plus haut.

Bon apprentissage, si vous avez d'autre question?

-
Edité par AbcAbc6 18 novembre 2023 à 0:48:04