Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Dreamweaver - How do I link 1 page to another

A

Antzh

macrumors newbie
Original poster
Jan 26, 2012
4
0
Hi Guys,

Im a complete novice and as you do I decided to build a website. Now I have created 2 pages that only consist of background images that were created in Photoshop. These pages consist of nothing but a background image but I want to create on the index page (page 1) an area that when the curser is moved over it you can click on it and it takes you to the next page which is called Intro (page 2). The area I want to create this over is the grey text 'grey ouroboros' and to always align there no matter what the browswer size is.
Its driving me mad, have looked for online help but I dont know the correct terminology.
The HTML is below. It may be messy so whatever you can advise I would be extremely grateful.

My website is www.greyouroboros.co.uk

HTML as follows:

Index Page (page 1):

<HTML>
<HEAD>
<TITLE>Grey Ouroboros</TITLE>

<style>
body{margin:0px}
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
visibility: hidden;
overflow: hidden;
}
</style>

</HEAD>
<BODY>
<p align="left"><a href="Intro.html" target="_parent"><img src="index.png" width="100%" height="175%" border="0" usemap="#Map" class="bg">
<map name="Map">
<area shape="rect" coords="298,169,766,386" href="Intro.html" target="_parent" alt="">
</map>
</a> </p>
</BODY>
</HTML>
 
Antzh said:
Hi Guys,

</HEAD>
<BODY>
<p align="left"><a href="Intro.html" target="_parent"><img src="index.png" width="100%" height="175%" border="0" usemap="#Map" class="bg">
<map name="Map">
<area shape="rect" coords="298,169,766,386" href="Intro.html" target="_parent" alt="">
</map>
</a> </p>
</BODY>
</HTML>
Click to expand...

Your href is the important part there (in bold)

Put the name of the page within that section and you'll be able to link to it.

I should say your code is a bit all over the place, and there are probably easier ways to do this than using a shape map. I'd recommend looking into some online tutorial sites such as teamtreehouse.com or something similar. They're very good at giving you basic coding skills to get started.

Also your page isn't showing in the link you provided. Have you uploaded anything yet?
 
thanks nutsngum, i have modified the code below but i want the area where you can click on to be permanently in the centre of the screen. can you advise what to do? also, cool name hehe

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<style>
body{margin:0px}
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}
</style>

</HEAD>
<BODY>

<img class="bg" src="Index.png" border="0">
<div style="position:absolute;z-index:5"></div>

</BODY>
</HTML>
 
Antzh said:
thanks nutsngum, i have modified the code below but i want the area where you can click on to be permanently in the centre of the screen. can you advise what to do? also, cool name hehe

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<style>
body{margin:0px}
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}
</style>

</HEAD>
<BODY>

<img class="bg" src="Index.png" border="0">
<div style="position:absolute;z-index:5"></div>

</BODY>
</HTML>
Click to expand...

If you want to centre the link section, this is a fairly standard way of doing it, you'll need to add the following bits of code to the CSS class for the image map.

Though, I can't actually see that class in the CSS that you show in your post, so you may need to add the following at the top of the page inside your <style> tags.

Code: 
.map {
position: fixed;
top: 50%;
left: 50%;
}

You will also need to add this (section in bold) to the main HTML to get this to work:

Code: 
<map name="Map" [B][I]class="map"[/I][/B]>
<area shape="rect" coords="298,169,766,386" href="Intro.html" target="_parent" alt="">
</map>

That should work.

Incidentally, I wasn't meaning to be insulting by saying the code is a bit messy, are you using Dreamweaver's visual view? It sometimes adds code that isn't completely necessary, and it doesn't always make for the cleanest markup. If you need a hand with anything in future, feel free to PM me.

Cheers.
 
thanks again for your help but tried what you suggested but it didnt work. its strange as when i ammended the html to its current view i could view it and the link worked ok in ie but in ff no link at all. below is the current code - would you mind adding in the correct code in a different colour so i can see where im going wrong? i know its kinda cheating but i dont think im gonna learn any other way. on the index page (page 1, below top) i want the link to be permanently over the text 'grey ouroboros' which then links to page 2 called Intro. You can now see this page at www.ouroboros.co.uk

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<style>
body{margin:0px}
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}
</style>

</HEAD>
<BODY>
<div align="center"><img src="Index.png" border="0" class="bg"> </div>
<div style="position:absolute;z-index:5"></div>

</BODY>

</HTML>
 
I'm just going to stick it in dreamweaver and sort it, if you'd like me just to send the files to you, I'll can email them to your address.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back