Editing hyperlinks in an image created in PS

  powerless 20:17 05 Oct 2004

You get all that?

Anyway here goes, I have a ummm template and i'm slowly editing this template to my needs.

However i'm stuck on editing hyperlinks within an image but the image itself is only allowed to be edited including hyperlinking. The individual hyperlinks do not appear to be editable.

The unedited file allows for the individual hyperlinks to be edited.


To edit the file [the image] i'm using photoshop. I edit and "save for web". Open in Frontpage and find that the hyperlinks [in the image] are not editbale.

Any ideas?

  powerless 20:20 05 Oct 2004

I've been told by the creators that it maybe a setting.

But which setting i don't know.

  Taran 01:26 06 Oct 2004

Your post is a little confusing.

Adding hyperlinks to an image is easy enough in Photoshop.

For use on the web and if the image is a page layout you really should think of slicing the image into its component parts.

Basically, you can do most of what you want within FrontPage. You can add hotspots to an image and make them clickable links, for example.

If you are talking about applying a hyperlink to one part of an image, insert the image into a page in FrontPage and then do one of the following:

1. Right click on the top toolbar, to the right of any of the buttons, icons or menus and left click on Pictures on the drop down menu that appears.


2. Select View --> Toolbars --> Pictures

This enables the Pictures toolbar.

At the right of the Pictures toolbar is a set of hotspot tools in different shapes (rectangle, circle, polygon). Use them to draw the shapes on your image that you want. A pop-up window will appear asking which file you want the hotspot to be a link to. Select as you normally would and save the file.

Perhaps if we broke this down into the nuts and bolts of it all you may get a more appropriate answer. I'm just guessing that the above is along the lines of what you are trying to do.

  powerless 01:43 06 Oct 2004

errr you solved it; hotspots did it!



About slicing, the thing is it was sliced?

  Taran 11:13 06 Oct 2004

Whether your image was sliced or not, without seeing the resulting file(s) and what you were trying to do with it/them I can't suggest where it all went wrong.

If the image was sliced into small parts and some of them were intended to be used as buttons, all you needed to do in FrontPage is right click on the image you want to assign a link to then choose the Hyperlink option from the drop down list of options.

Photoshop is a great tool with a steep learning curve. FrontPage is a great tool with a far gentler learning curve. Both are more than capable enough for anyone but all programs are subject to unexpected output sometimes. Often this is a result of not fully understanding the steps to get from start to goal state which, in the case of Photoshop, are sometimes very convoluted. That is just one reason why I use Paint Shop Pro and Ulead PhotoImpact for most of my image preparation. I've been trained on Adobe products but I still reach for PhotoImpact and PSP more often than not. Old habits and all that...

If you want to see some tutorials on developing web templates in Photoshop I'll post some here for you.


  powerless 22:14 06 Oct 2004

I think i had one.

Can I send you the file/s ?

  Taran 00:47 07 Oct 2004

Yes, if you want to send me the files feel free. I'll reply to your email you so that you have a current contact address for me.


  Taran 15:36 09 Oct 2004

OK, I have your files (nice layout by the way) and nothing springs out as fundamentally wrong so far. If you can, try to explain exactly where things are breaking down for you. I can see where you may encounter one or two problems that would require a bit of lateral thinking to get around but nothing untoward seems to be lurking in there.

The most obvious issue to me is that you are trying to use a graphic for the entire layout. You should use a sliced image for your sidebar with active hyperlinks, other slices for your top navigation bar with slices/hotspots as your buttons, standard HTML tables or CSS controlled layouts for your page content with an image tile background if required, and a normal textbox for your search tool.

Regarding your other email about another problem you'd like me to look at, perhpaps you could post it here first. You'll get a wider audience, a greater possibility of a fix and more people will potentailly benefit from a solution, if one can be found.

If you want to be able open the Photoshop html/images in FrontPage, click on a section of the exported image with a hotspot/hyperlink assigned to it and edit the link, then no, this won't work without a fair bit of jiggery pokery.

You can easily edit the link(s) in code view in FrontPage though, but you may need to add a small line of CSS into the document header to remove the default hyperlink blue line colour from around the image slices since FrontPage applies this by default to your links.

Try to give us some detail to work with.


  powerless 17:54 09 Oct 2004

The original unedited templates that I sent you appear to be editable with regards to the hyperlinks.

[Interactive_home .html] - The Homepage.

I can hyperlink anything I want to the best of my knowledge. I know about the blue line and this can be edited by changing the properties, now as I'm doing this only once [twice] I'm not bothered - Or should I be?

At this stage I'm not adding content, just getting the page layout how I want it. What I mean by that is i'm using Photoshop to edit the text under the icons-images at the top of the page and further down the page.

The edited page that I also sent you is how I want it to be looking. [more or less].

In Photoshop I select the text layer for the icons-images and change the text to what I want. This also applies to other parts of the page.

Now when I have made all my changes I "Saved for web" selecting ALL slices. Images were created and a html doc was produced. Viewing the HTML doc in Internet Explorer is the way I wanted it to be displayed. Except for the alignment being to the left.

Now I opened the html doc in Frontpage and edited the table alignment to Centre. This then displayed what I wanted in the centre of Internet Explorer. I then edited the main icon, i edited ONLY the hyperlink. The blue line was produced but easily resolved by amending the picture properites. I saved this page and viewed it in Internet Explorer. This then allowed someone to click to return home.

The page layout was not how i wanted it.

Remember no content being added at this time.


[Interactive_text .html] - This page will re- created but the conent will be differen for each page.

I did exaclty what I did with regards to the page layout. I made sure that it appeared the same with both _text and _home and after several attempts I now have the pages bang on accurate.


Now the above will probably only mean something to Taran because he has seen what I am talking about.

So for benfit of other members...

The unedited pages are as a follows:

interactive_home click here

interactive_text click here

The following pages are edited and how I want them to look.

interactive_home [renamed index.html] click here

interactive_text [renamed index_sub.html] click here


Now on the unedited interactive_text you may notice that the naviagtion links are clickable. But on MY EDITED page [index_sub] they are not. This is my first problem. However in another thread Taran told me about hotspots and I'm happy using hotspots.



The most obvious issue to me is that you are trying to use a graphic for the entire layout. You should use a sliced image for your sidebar with active hyperlinks, other slices for your top navigation bar with slices/hotspots as your buttons, standard HTML tables or CSS controlled layouts for your page content with an image tile background if required, and a normal textbox for your search tool.


This is bang on the problem i am having with regards to adding content. I can add contents to a point and then something [cells, tables?] goes wrong and it "knocks" the top of the page out of sync and the sides with it.

This is what it look likes: click here

The area where I want to add content originally appears to be an image which I delete. It's then where I then start to add my conent. But then that is when I have my problem.

How Do I solve it?

...and thanks for reading till the end ;-))

  powerless 20:45 09 Oct 2004

The search function is purely cosmetic - at the mo.

No idea where to look at how to maake that functional. But not a priority at the mo or is it?

  Taran 21:09 09 Oct 2004

OK, imagine this:

1. Sliced image across the top of your page

2. Sliced image down the left of your page

3. Footer image (if required) for the footer area of the page.

4. No image used at all for the content area.

I'm not sure how far along with CSS (if at all) you may be so for now we'll ignore that and stick with plain vanilla HTML tables.

Now, you could feasibly add any text to the icons that you might like and save the entire top image as a banner, for want of a better description. You could then apply hotspots to it with hyperlinks assigned to them in FrontPage without banging your head against a wall in Photoshop or ImageReady.

You could do more or less the same with the panel that makes up the navigation links at the left side of the page.

There are a loads of ways of getting to your goal state, but I'm not going to post a walkthrough in Photoshop this time.

Give me until later this evening or tomorrow morning and I'll post a link for you. I'm a bit tied up at present between remote support requests, but I should be able to squeeze a bit of FrontPaging in later or tomorrow.


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

WPA2 hack: How secure is your Wi-Fi?

Add Depth Of Field to a photo using Tilt Shift Blur in Photoshop

iPhone tips & tricks

Comment afficher des fichiers cachés sur Mac ?