PDA

View Full Version : how do you use this?

Maaya
01-29-2003, 12:55 AM
I've just created an iframe layout but I can't get the links done correctly. I found out we have to use this but I don't understand what the coords are for!! Can anyone help me??

<MAP NAME="your name">
<AREA SHAPE="rect" COORDS="--fill in--" HREF="url" TARGET="iframe" ALT="">
</MAP>

http://www.crazy-beautiful.nu/~reviews here my iframe layout
Rosekeet
01-29-2003, 01:20 AM
where it says URL put the URL to the link and where it says alt="" put the alt text in between the quotes. In case you didn't know, alt text shows up when you pass the mouse over the link with out clicking.
BTW
Cute layout. It might be nice if you shrunk it so it all fit in the window but it does look cute the way it is. :)
Maaya
01-29-2003, 01:29 AM
I understand that part, but it's just the COORDS that I don't understand
pb&j
01-29-2003, 05:54 AM
The rectangle co-ordinates are X,Y,X,Y. The top left corner and the bottom right corner of the rectangle are the points specified. The other 2 points of the rectangle will automatically be calculated.

--> To further the answer, that is known as an image map. Taking a single image and making "hot spots" on it
Maaya
01-30-2003, 12:01 AM
thank you so much! I got it to work now, but I can't seem to get the iframe positioned properly! Can you help me figure it out?

http://www.crazy-beautiful.nu/~reviews

Here's the html:

<HTML>
<head>
<title>blue frenzy &nbsp;&nbsp;&nbsp;&nbsp: kylie minogue @ crazy beautiful reviews</title>
</head>



<style>
<!--
body, p, td { font-size: 8pt; font-family:arial; line-height:11px; letter-spacing:0pt ;text-align: justify; color: #000000; }
a:link{text-decoration:none; color: #7B7B7B; }
a:visited{text-decoration:none; color: #7B7B7B; }
a:active{text-decoration:none; color: #7B7B7B; }
a:hover{text-decoration:none; color:#B0B4BB; }
-->
</style>

<body>
<body bgcolor=#EDEDF4>

<div align="center">
<table border="0" cellpadding="20" cellspacing="0" width="601" height="510">
<tr><td>
<img src="sreview.jpg" USEMAP="#kylie" border="0">
<MAP NAME="kylie">
<AREA SHAPE=RECT COORDS="8,417,45,426" HREF="about.html" ALT="about" OnMouseOut="window.status=''; return true"

OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="49,417,91,426" HREF="submit.html" ALT="submit" OnMouseOut="window.status=''; return true"

OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="93,417,159,426" HREF="reviewers.html" ALT="reviewers" OnMouseOut="window.status=''; return true"

OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="163,417,219,426" HREF="reviewed.html" ALT="reviewed" OnMouseOut="window.status=''; return true"

OnMouseOver="window.status='world wide web'; return true">
<AREA SHAPE=RECT COORDS="222,417,268,426" HREF="extras.html" ALT="extras" OnMouseOut="window.status=''; return true"

OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="272,417,316,427" HREF="index.html" ALT="clear" OnMouseOut="window.status=''; return true"

OnMouseOver="window.status=''; return true">
</MAP>
</td></tr>
<td valign="top">
<iframe name="main" src="iframe.html" frameborder="0" style="border:0" width="302" height="390" marginwidth=3

scrolling="yes">
</iframe>
</td>
</tr>
</table>
</div>



<style type="text/css">
body {scrollbar-face-color:#EDEDF4; scrollbar-shadow-color: #A0C4F4; scrollbar-3dlight-color: #EDEDF4;
scrollbar-track-color: #BBC0D5;
scrollbar-arrow-color:#000000;

</body>
</html>
pb&j
01-30-2003, 12:16 AM
Before you change anything to do with your iframe coding, try fixing your current page code to this...

<html>
<head>
<title>blue frenzy : kylie minogue @ crazy beautiful reviews</title>

<style type="text/css">
<!--

p, td {
font-size: 8pt;
font-family:arial;
line-height:11px;
letter-spacing:0pt;
text-align: justify;
color: #000000;}

body {
font-size: 8pt;
font-family:arial;
line-height:11px;
letter-spacing:0pt;
text-align: justify;
color: #000000;
scrollbar-face-color:#EDEDF4;
scrollbar-shadow-color: #A0C4F4;
scrollbar-3dlight-color: #EDEDF4;
scrollbar-track-color: #BBC0D5;
scrollbar-arrow-color:#000000;
}

a:link {text-decoration:none; color: #7B7B7B; }
a:visited {text-decoration:none; color: #7B7B7B; }
a:active {text-decoration:none; color: #7B7B7B; }
a:hover {text-decoration:none; color:#B0B4BB; }
-->
</style>
</head>

<body bgcolor=#EDEDF4>

<table align="center" border="0" cellpadding="20" cellspacing="0" width="601" height="510"><tr><td>

<img src="sreview.jpg" USEMAP="#kylie" border="0">

<MAP NAME="kylie">

<AREA SHAPE=RECT COORDS="8,417,45,426" HREF="about.html" ALT="about" OnMouseOut="window.status=''; return true" OnMouseOver="window.status=''; return true">

<AREA SHAPE=RECT COORDS="49,417,91,426" HREF="submit.html" ALT="submit" OnMouseOut="window.status=''; return true" OnMouseOver="window.status=''; return true">

<AREA SHAPE=RECT COORDS="93,417,159,426" HREF="reviewers.html" ALT="reviewers" OnMouseOut="window.status=''; return true" OnMouseOver="window.status=''; return true">

<AREA SHAPE=RECT COORDS="163,417,219,426" HREF="reviewed.html" ALT="reviewed" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='world wide web'; return true">

<AREA SHAPE=RECT COORDS="222,417,268,426" HREF="extras.html" ALT="extras" OnMouseOut="window.status=''; return true" OnMouseOver="window.status=''; return true">

<AREA SHAPE=RECT COORDS="272,417,316,427" HREF="index.html" ALT="clear" OnMouseOut="window.status=''; return true" OnMouseOver="window.status=''; return true">
</MAP>

</td></tr><td valign="top">

<iframe name="main" src="iframe.html" frameborder="0" style="border:0px;" width="302" height="390" marginwidth="3" scrolling="yes"></iframe>

</td></tr></table>

</body>
</html>
Maaya
01-30-2003, 12:25 AM
oh okay, I just changed the current code
Maaya
01-30-2003, 01:51 AM
Would <div> tags work to get the frame positioned properly? They seem to shift whenever it's viewed in a different screen size, ahh! Is there some type of code that can help me to make the frame overlap the image without it shifting to fit the screen size?
Maaya
01-30-2003, 02:51 AM
nevermind, I figured everything out! Thanks for all those who replied and gave their help!