Adding a link to an image

[Bea Res]

Hello everybody. My project is simple: an html page with buttons for links. But after many hours of research, I can't find how to manage this! As you can see from my attachment, there is a background image with two women. The anatomic icons change animations (become black and white) on mouseover. And that was quite simple to do from the property menu. I've tried many times to add a TapArea over the icons so that they become buttons to click and link to other places: I've already selected an event, I've placed it over an icon (for example, the "ear" icon), then chose the target (ear), chose the "mouse click" event, the personalized action ("gwd.clickArea"), but after that it asks me to add a code, and I've tried to find some example from other tutorials, but none of them work, aside this, I can't proceed further to select a destination. The Google Web Designer Tutorial doesn't explain enough, Youtube videos are for the older version and anyway don't mention this problem, and no clues here too. I don't know the Javascript code and I thought I could add a simple link to an image as I did for the last 20 years in my HTML documents. No examples of Javascript code to be added on GWD event for links around. I am stuck here and I hope you can help me.

The links that I want to add would preferably be connected to local folders/content (pdf documentation), but if this is not possible, it's ok to add a link to an external file too (like dropbox or box.net).

I hope I explained my problem well enough, if not so, please feel free to ask me more.

Thank you very much in advance.

Bea

[Svein-Tore Narvestad]

Hi Bea!

Have you considered to use the image button?

https://support.google.com/webdesigner/answer/6179124?hl=en&ref_topic=3181232 

Svein-Tore

[Bea Res]

Hi Svein-Tore, thank you, yes I did, that's how I made the buttons with the up and over image (in the first screenshot, only the up images are visible). Even if now I managed to add a link in the event javascript code window, the TapArea positioned over the button prevents the mouseover effect. If I place the TapArea under the level of the button instead, I have the mouseover effect but I don't have the link anymore. So I can have a link, OR the mouseover effect, not both.I also tried to add a text area over the button, hide the text and add a link. it works, but as the text area covers the button, again the mouseover effect doesn't work anymore, except for the little corners left free from the covering area, being it TapArea or Text area. Where do I go wrong?

In the second screenshot the custom code of the Event and the area covering a button are visible.

Thans in advance for your answers.

[Svein-Tore Narvestad]

OK, I see.  But why can't you add a mouseclick/touch event on the image button instead of using a tap area?

Svein-Tore

[Bea Res]

I changed the TapArea into a Touch/Click Area, the result is the same as for the TapArea and Text Area: the link works, but the area covering the button icon prevents the mouseover effect when your mouse passes over the button in the preview. How can I have the mouseover effect AND the link together?

I made a collage of images to better explain the problem with the software.

[Svein-Tore Narvestad]

Hi Bea!

 I still can't see the reason to use the touch/click Area.   Use the click event for the image button already there.

Svein-Tore

[Bea Res]

HI again, thank you very much for your answer: I solved! :) I applied an event directly on the button (mouse click) as you wrote. It was not very clear to me where to search for adding a simple URL, as the property of the images,one of the places where I expected to find it, don't show anywhere a link function, and even after enabling an event, I had to find and copy the script in javascript to add a simple link in a quite hidden and nested custom action. I find GWD quite different from the other web design softwares, and probably the name should be different too. Anyway now I know where to explore and find what I need, thanks again!

Bea

[dhrub...@gmail.com]

Any video tutorial?

[Kent]

A simple way to do this without the TapAreas, Events and custom JavaScript used above (which work fine too):

1. Drag your image onstage
2. Right-click your image and choose Wrap
3. Switch to Code view and edit that wrapping div tag to be a standard A tag (screenshot) with HREF set to your url.

Hope that helps,

Kent

Google Web Designer team

[gka...@tuzlukahve.com]

why links r doesn't work at adwords ?

[San Khong]

AdWords' policy does not allow custom exit in image ads. Any click on the creative will exit to the final URL defined in AdWords. 

Thanks,

San

Google Web Designer team

[gka...@tuzlukahve.com]

I saw some html5 banners with different links. how can they do this?

[San Khong]

Dynamic ads allow exit to product urls so you probably saw a dynamic ad.