
Originally Posted by
Floxsnox
Hello guys
It's an old post and my 1st post.
I came across this while browsing am new just recently started learning about html and CSS.
Is it possible to keep a link in a different list and the picture is Displayed in another place in the same web page
Define "list". But if I understand you correctly, this is simpler than you may think. The image tag:
Code:
<img src="" alt="Images" id="imageReplace"/>
which is being populated by the list of links can go anywhere you like on the page. And the list of links:
Code:
<a href="#" onclick="changeImage('PATHTOIMAGE1.jpg');">Link1</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2.jpg');">Link2</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3.jpg');">Link3</a>
can go anywhere as well. You can even have several lists of links located in different places on the page if you like.
Further, we can modify the code so that more than one set of image/lists pairings are possible:
Code:
<html>
<head>
<script type="text/javascript">
function changeImage(element, id) {
document.getElementById(id).src = element;
}
</script>
</head>
<body>
<img src="" alt="Images" id="imageReplace"/><br />
<a href="#" onclick="changeImage('PATHTOIMAGE1.jpg', 'imageReplace');">Link1</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2.jpg', 'imageReplace');">Link2</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3.jpg', 'imageReplace');">Link3</a>
<p> </p>
<img src="" alt="Images" id="imageReplace2"/><br />
<a href="#" onclick="changeImage('PATHTOIMAGE1a.jpg', 'imageReplace2');">Link1a</a>
<a href="#" onclick="changeImage('PATHTOIMAGE2a.jpg', 'imageReplace2');">Link2a</a>
<a href="#" onclick="changeImage('PATHTOIMAGE3a.jpg', 'imageReplace2');">Link3a</a>
</body>
</html>
Bookmarks