When you hover the links (every link has a different image) image must shown in the div. How can i do it? I have to do it with javascript not css, and i don't wan to use innerHTML.
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener("load",function(){
var backG=document.getElementById("b");
backG.style.backgroundColor="#eee";
var h=document.getElementById("head");
h.style.textAlign="center";
h.style.margin="50px";
var x=document.getElementById("ulist");
x.style.textAlign="center";
var lis=x.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].style.display="inline";
}
var links=x.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].style.textDecoration="none";
links[i].style.border="1px solid black";
links[i].style.padding="10px";
links[i].style.color="blue";
}
var boxDiv=document.getElementById("box");
boxDiv.style.border="1px solid blue";
boxDiv.style.width="500px";
boxDiv.style.height="500px";
boxDiv.style.margin="50px 525px";
boxDiv.style.backgroundColor="white";
});
</script>
</head>
<body id="b">
<h1 id="head">Move Your Mouse Over Links For Different Images</h1>
<ul id="ulist">
<li><a href="#link">image 1</a></li>
<li><a href="#link">image 2</a></li>
<li><a href="#link">image 3</a></li>
<li><a href="#link">image 4</a></li>
</ul>
<div id="box">
</div>
</body>
``
Aucun commentaire:
Enregistrer un commentaire