Creating a web link from a JPG file

[Fred Zag]

I'm working in PI12. A while ago, possibly pre v12, I created a UFO file with several objects, one of which was an image which linked to a web site. The UFO was saved as JPG and imbedded in a web page. The imbedded image (within an image) acts as a "hot spot" and links to another web site.

I remember having a difficult time trying to get it to work but finally succeeded. Now I would like to add a second "hot spot in the same JPG file but can't remember how I did it in the first place. Can anyone point me in the right direction?

Thanks in advance,

Fred

[Ron P.]

Welcome to the forums Fred,

In PI 12, if you still have that UFO file, you can add another image object to it. Once you have added the additional image object, right-click on it and select Properties. In the Object Properties dialog window, go to the Image Map tab, then enter the URL of the website you want to link that object to, select the target (blank, self, ect., ) the alternate text and so on. Once you're finished then you can save use the Web Optimizer or however you proceed to create your web page.

[Fred Zag]

Thanks for that super quick reply! One tiny little problem - that is exactly ( I believe) what I am doing, the new image appears on the web page with the additional imbedded image/button/whatever, but it is not a link.

Thoughts?????

[Fred Zag]

Thanks for that super quick reply! One tiny little problem - that is exactly ( I believe) what I am doing, the new image appears on the web page with the additional imbedded image/button/whatever, but it is not a link.

Thoughts?????

Just a bump on this. I had to switch priorities, but now am back on this issue. Since my last attempt I created a new test file and am attempting to insert a hotspot on it. I am now unable to create even one hotspot. Again, I remember having a problem getting this to work some time ago and finally figured it out. (Probably just dumb luck!) Also, this time around I'm using PI x3.

Any suggestions greatly appreciated!

Fred

[Ron P.]

I'm not sure why you're having this problem. I just threw together a quick HTML doc (web page) done strictly with PI X3. It has 2 photos, that are also links to another web page, some text and a background. Of course you must either view it in your browser (File>Preview in browser), or after you're finished, go to File>More Save Options>Save for Web>As HTML. Then in windows explorer open the HTML doc you just created, which will use your browser, and see if clicking on your hotspots will do as you're wanting them to do.

I've attached a zip file that has the html doc, and all the files used to create it. Clicking on the images should take you to my advert where I'm attempting to sell a couple of things.

Edited: Removed attachment..

[Fred Zag]

I'm not sure why you're having this problem. I just threw together a quick HTML doc (web page) done strictly with PI X3. It has 2 photos, that are also links to another web page, some text and a background. Of course you must either view it in your browser (File>Preview in browser), or after you're finished, go to File>More Save Options>Save for Web>As HTML. Then in windows explorer open the HTML doc you just created, which will use your browser, and see if clicking on your hotspots will do as you're wanting them to do.

I've attached a zip file that has the html doc, and all the files used to create it. Clicking on the images should take you to my advert where I'm attempting to sell a couple of things.

Thanks again for the swift reply, Ron. But I'm afraid we're talking apples and oranges. I guess I wasn't clear on what I'm trying to do. I have a jpeg file located on a web page which contains mainly text. This way the user can use PI to edit the source file, edit text and save it as a jpeg, optimize it and upload it to the web server. Some time ago I added a graphic to the user's source file, made it a hotspot and associated a link with it. It has worked fine for at least a couple years. Now I have added a second graphic which I would also like to make a hot spot but can't seem to remember how I created the first one.

The website is here: http://www.greenewayrv.com
The jpeg file is called splash2.jpg and is the panel with all the yellow text. If you mouse over the Route66 graphic in the lower right corner you will see that it is a link. I am trying to accomplish the same with the Top50 graphic on the left.

I hope this helps clarify what I'm talking about.

Thanks for your help,

Fred

[Ron P.]

That does clarify things. Did you use any Web site creation program to build the page? Looking at the code, it appears that some other program was used to construct the web page. You may need to revisit that program to make alterations to it.

You say you have the UFO file for that page, and more specific, for the splash2.jpg file? If so, is the Top50 graphic a separate object? If not have you tried to create an empty or transparent rectangle over it? To create a transparent shape, that can be used as a hotspot;

1. Draw your rectangle over the Top50 graphic, I used black for the fill color.
2. Right-click on your "black" rectangle, select Properties.
3. On the General tab, check the box beside Transparent color, and set the transparency color using the small color block to the immediate right.
4. Go to the Image Map tab, and type in the URL of the web site you want the link to go to, and if you desire set the Target, and other information.

Is that what you're looking to do? Using the above method, you could place links (hotspots) just about anywhere on an existing image.

[Fred Zag]

That does clarify things. Did you use any Web site creation program to build the page? Looking at the code, it appears that some other program was used to construct the web page. You may need to revisit that program to make alterations to it.

You say you have the UFO file for that page, and more specific, for the splash2.jpg file? If so, is the Top50 graphic a separate object? If not have you tried to create an empty or transparent rectangle over it? To create a transparent shape, that can be used as a hotspot;

1. Draw your rectangle over the Top50 graphic, I used black for the fill color.
2. Right-click on your "black" rectangle, select Properties.
3. On the General tab, check the box beside Transparent color, and set the transparency color using the small color block to the immediate right.
4. Go to the Image Map tab, and type in the URL of the web site you want the link to go to, and if you desire set the Target, and other information.

Is that what you're looking to do? Using the above method, you could place links (hotspots) just about anywhere on an existing image.

Thanks Ron, now we're cookin'! Yes the site was originally built with Dreamweaver and we are currently evaluating other products for the rewrite. The sample of the new site that I am working on is at http://www.winjammerconsulting.com/greenewayrvnew/ The jpeg file in this site is called webtext.jpg.

And I'm back to where I started - sort of. I can't get even one hotspot to appear as a link. I followed your four steps above, creating the hotspot/rectangle. I also just went to properties of the object/pic and entered the URL, target, etc there. Neither produces a link. Can it be something I'm missing when I save the jpeg file?

And again, thanks for the continued help,

Fred

[Ron P.]

Can it be something I'm missing when I save the jpeg file?

That's where the answer is.... JPEG files are nothing but images. The hyperlink is part of a HTML document file. So just saving it as an image will not work, it must be saved as a HTML.

[Fred Zag]

Can it be something I'm missing when I save the jpeg file?

That's where the answer is.... JPEG files are nothing but images. The hyperlink is part of a HTML document file. So just saving it as an image will not work, it must be saved as a HTML.

Aha, is there an emoticon for a lightbulb?? Ah yes there it is!!
The html <map> tag. I manually inserted the html in the <img> definition. It's all coming back to me. Maybe this Alzheimers thing hasn't totally taken over? Somehow my feeble brain had the mapping imbedded in the header info of the jpeg file.

Thanks for your patience, Ron. I really DO appreciate it. Sometimes these things just stare me in the face but I need someone like you to help me see them.

Possibly I could ask for one more favor. I'm having a problem getting the jpeg to be transparent. I changed it to a png file and it comes accross transparent. I use the same "save as" options with the jpeg file and cannot get rid of my white background. If I use the HTML editor to try to remove it, I get a extremely poor rendition of transparency. The http://www.winjammerconsulting.com/greenewayrvnew/ currently has an example of the png file.

Once more, thanks for you patience as well as your help. Hope I can return the favor some day.

Fred

[Ron P.]

First hide the background by clicking on the eye beside the background layer in the layer manager. Then instead of using the Save As, use the Web>Image Optimizer option. With the background layer hidden/transparent, select the text object/layer. Now go to the Web menu and select Image Optimizer, you should get a prompt asking if you want to save the Selected objects. Then using PNG as your file type, click on the Mask Options tab. PI should however recognize that you have a transparent background.

Do you have a border applied to your text, or is the white around your text just parts of your background?

Generally if I know that I'm going to need my image to have a transparent background, I'll start out that way, when I choose new image, I select transparent for the background. If you'll notice when doing this, all this does is "hide" the background layer.