[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 166
  • Last Modified:

Help creating links in photoshop

Hi,  Have seen a website I like

http://veerle.duoh.com/

and want to know how the link were created with the header image in the background.

Was this done in photoshop and image ready??   You know the links where it says home....about ...archive...contact...links...

Do you know of any tutorials that can help me achieve this.....cheers guys
0
dthomas31uk
Asked:
dthomas31uk
  • 3
2 Solutions
 
Mark StegglesWeb DeveloperCommented:
Greetings dthomas31uk,

You will need to use css to do this.

First, make a div and give it an id or a class. Inside the div, have a ul list. Make the images in your favourite graphics program.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Steggs</title>
<style type="text/css">
* {padding:0;margin:0;}
#header {
height:200px;
border:1px solid #000;
position:relative;
}
ul#nav {
position:absolute;
bottom:0;
}
ul#nav li {
display:inline;
}
ul#nav li a:link,
ul#nav li a:visited
{background:#ff0000 url(images/normalmenu.gif) no-repeat top left;
}
ul#nav li a:hover
{background:#fcba0a url(images/hovermenu.gif) no-repeat top left;
}
</style>
</head>
<body>
<div id="header">
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</body>
</html>
0
 
Mark StegglesWeb DeveloperCommented:
You will need to make the images transparent gifs or pngs

Regards
0
 
Mark StegglesWeb DeveloperCommented:
you will need to add an image to the background of the #header

#header {
height:200px;
border:1px solid #000;
position:relative;
background:url(image.jpg) no-repeat top left;
}
0
 
Vanessa_PritchardCommented:
Hi,

You can also do it in Photoshop and ImageReady, if that is what you prefer:

1. Start with your button image, created in Photoshop.

2. Create a new layer of how you want the button to look when the mouse rolls over it. (You can do it easily by using layer styles)

3. Switch to ImageReady by clicking the button at the bottom of the tools palette (this way, your file automatically opens intact.

4. Open the rollover palette (or the Appearance palette in Photoshop CS and newer). Make sure the top layer is hidden and your "Normal State" (how it looks BEFORE the mouse touches it) will be set.

5. Click on the new state button and the "Over State" is created. This is will appear on the webpage when the mouse moves over the image. Change its apperance by making the top layer visable. Each state will reflect what is visable in the layers palette.

6. Now click on the slice tab and assign a URL to your rollover. Try to use http:// as well as the file extension (.htm or .html, etc).

You can test your rollover by clicking the test button on the tool palette.

If you like it, save your page as File > Save Optimized and ImageReady will do everything else, including creating the html page.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now