Hi, everybody;
@helvissa, I think that thanks to borniol, you could find your own way to custom your site's colours.
I tried to get your imagemap CSS driven, and made this first release in
style.css, adding theese lines:
/*--Helvissa's image map------------------------------------------------*/
#banner {
background-image: url(images/banner.jpg);
position:relative;
height: 250px;
width: 886px;
}
#menu a {
position: absolute;
height: 34px;
top: 214px;
text-decoration: none;
}
#menu a i { visibility: hidden; }
a#home { left: 30px; width: 64px; }
a#music { left: 104px; width: 67px; }
a#podcasts { left: 182px; width: 105px; }
a#info { left: 299px; width: 47px; }
a#gallery { left: 361px; width: 91px; }
a#forum { left: 463px; width: 75px; }
a#links { left: 545px; width: 66px; }
a#contact { left: 621px; width: 89px; }
I also changed the template file
header.html like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{direction}">
<head>
<title>{site_name}</title>
<meta http-equiv="content-type" content="text/html; charset={charset}" />
<link rel="stylesheet" href="{template_url}/style.css" />
<script language="javascript" type="text/javascript">
<!--
var captcha_reload_count = 0;
var captcha_image_url = "{url_captcha_image}";
function new_captcha_image() {
if (captcha_image_url.indexOf('?') == -1) {
document.getElementById('captcha_image').src= captcha_image_url+'?c='+captcha_reload_count;
} else {
document.getElementById('captcha_image').src= captcha_image_url+'&c='+captcha_reload_count;
}
document.getElementById('captcha_input').value="";
document.getElementById('captcha_input').focus();
captcha_reload_count++;
}
function opendetailwindow() {
window.open('','detailwindow','toolbar=no,scrollbars=yes,resizable=no,width=680,height=480');
}
function right(e) {
if ((document.layers || (document.getElementById && !document.all)) && (e.which == 2 || e.which == 3)) {
alert("© Copyright by {site_name}");
return false;
}
else if (event.button == 2 || event.button == 3) {
alert("© Copyright by {site_name}");
return false;
}
return true;
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = right;
}
else if (document.all && !document.getElementById){
document.onmousedown = right;
}
document.oncontextmenu = new Function("alert('© Copyright by {site_name}');return false");
// -->
</script>
{if has_rss}
<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />
{endif has_rss}
</head>
<body bgcolor="#FFFF99" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">
<table width="886" height="250" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="886" border="0" cellspacing="0" cellpadding="0" class="tablehead">
<td>
</td><div align="center"><div id="banner">
<div id="menu">
<a href="http://www.helvissa.com/home.htm" id="home"><i>Home</i></a>
<a href="http://www.helvissa.com/music.htm" id="music"><i>Music</i></a>
<a href="http://www.helvissa.com/podcasts.htm" id="podcasts"><i>Podcasts</i></a>
<a href="http://www.helvissa.com/info.htm" id="info"><i>Info</i></a>
<a href="http://www.helvissa.com/gallery.htm" id="gallery"><i>Gallery</i></a>
<a href="http://www.helvissa.com/forum" id="forum"><i>Forum</i></a>
<a href="http://www.helvissa.com/links.htm" id="links"><i>Links</i></a>
<a href="http://www.helvissa.com/contact.htm" id="contact"><i>Contact</i></a>
</div>
</div></div>
</tr>
</table>
</td>
</tr>
</table>As I am a Firefox user, I din't encounter any problem, until I tried it in MS Internet Explorer... what a mess!
The only way I found to solve my IE problems was to add theese non-sense lines in
style.css:
/*--code below is to keep compatible with that boring MS IE-----------*/
a#home:hover,
a#music:hover,
a#podcasts:hover,
a#info:hover,
a#gallery:hover,
a#forum:hover,
a#links:hover,
a#contact:hover { border: none; }
Since there, it works for me both in IE and in FF. I did not try it in Opera browser.
BTW, the whole template had to be rewritten and has to be downloaded again entirely (sorry for this inconvenience).
As usual, live site result can be seen and downloaded here:
http://amissc.free.fr/4_2006/details.php?image_id=32Please test with your own browsers and feel free to post your impressions.
If it works for you, you only will have to change your links' urls once in the template file "
header.html", to be shown in each template page.
@borniol: I had your pictures and began to work on it. Will tell you as soon as possible.
@helvissa, try to change the name of your image called "banner", as many adblock softwares block theese images. Simply call it "helvissa.jpg"...
@ all, regards.
