Ai-je écrit ces balises HTML img correctement?

-1

Ce que je veux faire ici, c'est empiler ces images les unes sur les autres en utilisant la propriété z-index et changer l'index z pour que les autres images apparaissent en haut à l'aide des boutons. J'ai essayé de faire ceci en plaçant les images tous dans le même endroit et puis employez la fonction de javascript pour changer les propriétés d'index de z des images selon le bouton. Ce n'est pas une très belle façon de le faire mais je ne vois pas d'autre moyen que d'utiliser la propriété de visibilité. Quelqu'un pourrait-il m'aider à mettre en pratique mon point de vue sur la façon dont cela devrait fonctionner? Je ne peux pas vraiment le comprendre ici.Ai-je écrit ces balises HTML img correctement?

 <!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
</head> 
<body> 

<center><img src="/tools/c_clamps.jpg" id="tool1" height="248" width="364" style = "position:absolute; z-index:1";></center> 
<center><img src="/tools/crescent_wrench.jpg" id="tool2" height="248" width="364" style = "position:absolute; z-index:0";></center> 
<center><img src="/tools/chisels.jpg" id="tool3" height="248" width="364" style = " position:absolute; z-index:-1";></center> 


<script language="javascript" type="text/javascript"> 
<!-- 
//<![CDATA[ 
function select(picture){ 
    if(picture == 1) 
    { 
     document.getElementByID("tool1").z-index:1; 
     document.getElementByID("tool2").z-index:0; 
     document.getElementByID("tool3").z-index:-1; 
    } 
    else if(picture == 2) 
    { 
     document.getElementByID("tool1").z-index:0; 
     document.getElementByID("tool2").z-index:1; 
     document.getElementByID("tool3").z-index:-1; 
    } 
    else if(picture == 3) 
    { 
     document.getElementByID("tool1").z-index:-1; 
     document.getElementByID("tool2").z-index:0; 
     document.getElementByID("tool3").z-index:1; 
    } 
} 
//]]> 
//--> 
</script> 
<br/> 
    <div width="400" style="display: block;margin-left: auto;margin-right:  auto;text-align: center"> 
<button type = "button" onclick="select(1);">Clamps</button> 
<button type = "button" onclick="select(2);">Chisels</button> 
<button type = "button" onclick="select(3);">C. Wrench</button> 
</div> 


</body> 
</html>

Source

2017-03-17 Michael DeMarco

Notez qu'il est [ 'document.getElementById()'] (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById). Il y a aussi plusieurs autres problèmes ici, par exemple '.z-index' n'est pas la façon dont vous accédez à cette propriété en JavaScript car' '' 'n'est pas valide pour un nom de propriété, vous devez utiliser' zIndex'. Et vous utilisez '=' pour l'affectation, pas ':'. –

Le 'zIndex' est accessible en tant que' node.style.zIndex'. –

Merci! Je suis encore assez nouveau avec ce genre de choses, donc je me retrouve à faire beaucoup d'erreurs que je ne peux pas trouver. –

Je pense que la syntaxe doit être:

document.getElementById("tool1").style.zIndex = 0;

Source

2017-03-17 01:39:20

de légères modifications pour votre javascript:

Au lieu de:

document.getElementByID("tool1").z-index:1;

il devrait être:

document.getElementById("tool1").style.zIndex = 1;

Fix tous ceux, ça peut marcher!

Source

2017-03-17 01:39:11

Peut-être? Grande confiance là-bas! –

Vous pouvez utiliser des guillemets ou des indentations pour mettre en forme le code dans votre réponse. –

Ai-je écrit ces balises HTML img correctement?

Répondre

Questions connexes