Solved

Creating links on a web page header created with photoshop/Illustrator

Posted on 2010-11-09
10
390 Views
Last Modified: 2012-05-10
I plan to create a header with Adobe Illustrator for my web page. I will  like to have two links on the image which will be clickable (Home and Contact us) - far right top
How can i put links on the header? The header will possibly be 850px wide and 90px high.

Thanks.
0
Comment
Question by:Sirdots
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +3
10 Comments
 
LVL 10

Expert Comment

by:Tyler Laczko
ID: 34097869
You have a couple options. Easiest 2 are:

split the image in 2
-- or --
create an image map
    see - http://www.w3schools.com/TAGS/tag_map.asp
0
 
LVL 22

Expert Comment

by:remorina
ID: 34098292
Hi Sirdots,
The easier would be to use an an image map, however you would need a tool that can generate the code and coordinates for your shapes.

You can do this using a program like Dreamweaver, or you can use some free tools or online map creators.

You can try the following

Meracl              ImageMap Generator (Freeware Image Map Tool)
http://www.stockholm.bonet.se/meracl/mimg.htm 

Online HTML image map creator
http://www.mobilefish.com/services/image_map/image_map.php

It should be an easy and quick,  If you still need further help you can attach the image and I'll happy provide the coordinates/code.

Cheers!
0
 
LVL 10

Expert Comment

by:Tyler Laczko
ID: 34098322

If you read my comment my second suggestion was that.. Plz read b4 responding just for points.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Expert Comment

by:remorina
ID: 34098662
@professionalcomputersolutions:
Although I should not and I don't usually respond to reponses of other experts, and avoid personal responses but from time to time and with new comers we sometimes are forced to.

Please note that a question is supposed to be responded to by as many experts as possible and it's solely up to the original poster to decide which answer serves best.

Also I'm not here for points and if you have noticed I have more than I need !, unlike many others who are here for them, especially beginners!

Last but not least, I have read your post, and you have mentioned using image maps, but by no means you have provided how to achieve or produce an image map!, the W3 Schools link does not tell you how to generate the coordinates or create the map, thus your answer is not complete.

So kindly try to respect other experts and members of this community to help it serve the intended purpose, as I have respected your post and didn't mention that the W3 link wouldn't help.

Cheers!
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34098746
You could also slice the image using the slice tool in adobe Illustrator. You can place the images in your HTML giving the 2 slices different links. Since I don't know your amount of experience with HTLM I am not sure how detailed I should be in giving additional instructions. If you are unsure on how to achieve the process of placing the slices, comment back and I will respond with further instructions.
0
 
LVL 5

Expert Comment

by:SaigonJeff
ID: 34102775
I actually like using both methods mentioned by professionalcomputersolutions. By slicing the image, I can also create other states for each slice and trigger a rollOver behavior with an image map containing the link.

All is quite easily accomplished in Dreamweaver and your favorite image editor.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 34105987
Another option not mentioned is to simply create the links using text (Anchor Tags) and then style and position them over your header image using CSS - this is the CSS zone after all.

This will have some benefits over image maps - it'll be more 'readable' by search engines and screen readers, and you can style the different states of the link (Active, Hover, Visited). Also, if you decide to add more navigation, you don't need to recreate header images and image maps.

Of course, you're limited to the styling you can get with CSS so this method may not be an option for you.

If you want to take this route, create your header image as one image, set it as the background of a DIV, and then inside that DIV include the HTML for the links (a common way of coding navigation is to use UL and LI tags)

You can then style and position your navigation using standard CSS.

Always more than one way to skin a cat :)


0
 

Author Comment

by:Sirdots
ID: 34139842
Thanks everyone. ChrisStanyon, your solution seems interesting but just tried it now and it doesnt work. I created an image using paint and set it as the background of a div but the image does not show.
Here is my code below.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing</title>
		<link rel="stylesheet" type="text/css" href="styles/main.css" />
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>

    <body>
	<div id="page">
		<div id="header">
			<p> Here is my header </p>
		</div>	
	</div>
	
	</body>
</html>

here is my css
******************

body {
	font-family: Arial,helvetica,sans-serif;
	font-size: 85%;
	margin: 0;
	padding: 0;
}

#page {
	width: 750px;
	margin: 0 auto;
}

.firstone {
	color: white;
	margin: 0;
}

#header {
	background-image: url(header.JPG); 
}

Open in new window

header.JPG
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 34140010
@Sirdits.

You're heading in the right direction.

A couple of things to check.

In your CSS you've set the background-image to header.JPG. Because file paths are relative, it's looking for the header.JPG file in the same folder as your CSS i.e styles, and probably can't find it.

In your css, use full paths such as

background-image: url(/header.JPG)

Also, your header DIV has no dimensions, so it will shrink wrap the contents. You may want to set the width and height of the header, to match your image.




#header {
	background-image: url(/header.JPG); 
	width:750px;
	height:100px;
}

Open in new window

0
 

Author Closing Comment

by:Sirdots
ID: 34140453
I like this better since if I have to add any new thing i can do so with css  than cutting the image again.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question