flaymzofice
07-19-2006, 11:20 PM
So I found a site that told me how to image map. According to that, all I needed was the co-ordinates for the area I wanted to hot spot. So if there's no problem here (because I've read about image slicers etc in PSP? I'm using PS7)
Then, here's the code for my LJ
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>%%title%%</title></head>
<style type="text/css">
<!--
body{
background-image:url(http://img.photobucket.com/albums/v27/flaymzofice/ljcopy.jpg);
background-repeat: no-repeat;
background-color: #000000;
background-attachment: fixed;
background-position: 0px 0px;
scrollbar-face-color: #E0F1F9;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #EEEEEE;
scrollbar-darkshadow-color: #CCCCCC;
scrollbar-shadow-color: #BBBBBB;
scrollbar-arrow-color: #AAAAAA;
scrollbar-track-color: #E5E5E5;
}
td{
font-family: verdana, sans-serif;
font-size: 10pt;
}
tt, pre {
font-family: monospace;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.shadowed, .ljadshadowed {
font-size: 8pt;
background: #000000;
}
.ljadshadowed div {
visibility: visible;
position: relative;
}
.meta {
font-size: 8pt;
}
.index {
font-size: 8pt;
}
.caption, .index {
color: #FEFFFF;
}
.comments {
font-size: 8pt;
}
span.moodmusic, span.musicmood {
display: none;
}
div{
position:absolute;
left:700px;
width:10px;
height:275px;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
clip:rect(auto);
background-color: transparent;
}
td div{
position:relative;
left:1;
top:1;
height:auto;
width:auto;
overflow:hidden;
border:0;
}
table{
width:100%;
margin-left:0%;
margin-right:0%;
}
table table{
width:95%;
margin:0;
}
table table table{
width:0;
}
-->
</style>
<map name="mymap">
<area shape="rect" href="http://www.livejournal.com/userinfo.bml?user=%%username%%" coords="15,66 5,43 16,51 5,76">
</map>
<body text="#000000" link="%%color:page_link%%" vlink="%%color:page_vlink%%" alink="%%color:page_alink%%">
<div align="left" style="width: 280; position: absolute; top: 186px; left: 500px">
%%events%%
<center>%%skiplinks%%</center> <br> <br>
</div>
</body>
</html>
Obviously I haven't pointed to the image I want to image map...but I'm not quite sure how to. Because the background coding in CSS is different to how you would put in HTML for image mapping, I'm a bit lost as to where I should put the <usermap=> etc. Any ideas?
Oh, and the site currently looks like this: frozen_out.livejournal.com (http://frozen_out.livejournal.com)
Then, here's the code for my LJ
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>%%title%%</title></head>
<style type="text/css">
<!--
body{
background-image:url(http://img.photobucket.com/albums/v27/flaymzofice/ljcopy.jpg);
background-repeat: no-repeat;
background-color: #000000;
background-attachment: fixed;
background-position: 0px 0px;
scrollbar-face-color: #E0F1F9;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #EEEEEE;
scrollbar-darkshadow-color: #CCCCCC;
scrollbar-shadow-color: #BBBBBB;
scrollbar-arrow-color: #AAAAAA;
scrollbar-track-color: #E5E5E5;
}
td{
font-family: verdana, sans-serif;
font-size: 10pt;
}
tt, pre {
font-family: monospace;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.shadowed, .ljadshadowed {
font-size: 8pt;
background: #000000;
}
.ljadshadowed div {
visibility: visible;
position: relative;
}
.meta {
font-size: 8pt;
}
.index {
font-size: 8pt;
}
.caption, .index {
color: #FEFFFF;
}
.comments {
font-size: 8pt;
}
span.moodmusic, span.musicmood {
display: none;
}
div{
position:absolute;
left:700px;
width:10px;
height:275px;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
clip:rect(auto);
background-color: transparent;
}
td div{
position:relative;
left:1;
top:1;
height:auto;
width:auto;
overflow:hidden;
border:0;
}
table{
width:100%;
margin-left:0%;
margin-right:0%;
}
table table{
width:95%;
margin:0;
}
table table table{
width:0;
}
-->
</style>
<map name="mymap">
<area shape="rect" href="http://www.livejournal.com/userinfo.bml?user=%%username%%" coords="15,66 5,43 16,51 5,76">
</map>
<body text="#000000" link="%%color:page_link%%" vlink="%%color:page_vlink%%" alink="%%color:page_alink%%">
<div align="left" style="width: 280; position: absolute; top: 186px; left: 500px">
%%events%%
<center>%%skiplinks%%</center> <br> <br>
</div>
</body>
</html>
Obviously I haven't pointed to the image I want to image map...but I'm not quite sure how to. Because the background coding in CSS is different to how you would put in HTML for image mapping, I'm a bit lost as to where I should put the <usermap=> etc. Any ideas?
Oh, and the site currently looks like this: frozen_out.livejournal.com (http://frozen_out.livejournal.com)