adding an image map to javascript image swap

stenik10
stenik10 used Ask the Experts™
on
Hi,
I am developing a site for a client and wanted to have the company logo reload with a different background each time the page is refreshed or a new page is loaded. I created 3 different images with company logo, facebook logo and a background on. I found a script that would rotate these images round on a refresh of the page or by navigating to a new page.
Initially my intention was to have the script load a different background image each time the page refreshed and then position the company logo and facebook logo using CSS so that when they were clicked on they would navigate to the correct page. When I tried to do it that way the CSS positioned logos disappeared behind the javascript placed background image.
Is it possible to position the logos using CSS so that they are visible above the background  and if so how?
If not, is there a way with javascript to be able to make the logos embedded in the image, link to other locations.

You can view the page at

www.solidsurfacedevelopment.co.uk/wip/template3.htm

I hope someone can help with this.

Regards

Steve
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
You can use a tabla o div, and put the images as the background, and over it locate logos as you want.

And when use the function printaImage() set the background of div

<head> 
<script type="text/javascript" language="JavaScript"> 
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.
 
NumberOfImagesToRotate = 3;
 
// Specify the first and last part of the image tag. 
 
//FirstPart = '<img src="images/backlogo';
//LastPart = '.jpg" height="185" width="900">';
 
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
//document.write(FirstPart + r + LastPart);
img = "images/backlogo" + r + ".jpg";
d = getElementById("header");
d.style.backgroud = "url(" + img + ")";
}
//-->
</script> 
</head> 
<body onload="printImage();">
<div class="header">
put here your logos
</div>
</body>

Open in new window

Author

Commented:
I actually solved this before I had the response. I can't say whether the solution is complete or accurate as I didn't need to try it in the end. Also I said partially on the solution being easy to follow because I have very little understanding of javascript and what was being said.

Author

Commented:
wmadrid1

Thanks for this but as my comment above states I managed to solve this late last night with CSS and some absolute and relative positioning.

Regards

Steve

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial