Image Swap and HTML5 audio effect - clickable

[tamas]

1) Script Title: Image Swap and HTML5 audio effect

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex15/domroll2.htm

3) Describe problem:

Greetings!

I have just found this script... exactly what I need now.

I would like to use the option: Rollover and Mousedown image. It works nice.

The question is: How may I make it clickable? So, the visitor may click and would be redirected to another page.

Thanks a lot for the script! And for the answer...

Tamas
p.s. I am rather beginner in scripting...

[ddadmin]

Simply make the image a link, by wrapping it with the <a> tag. For example:

<a href="http://yahoo.com"><img src="original.jpg" data-srcover="over.jpg" data-srcdown="down.jpg"></a>

[tamas]

THANKS, ddadmin!

It was qucik! And super useful... I have wrapped it in... and works cool and nice!

Thanks a lot,

Tamas

[tamas]

Greetings... and further question...

I would like to create an opening menu-page with five zones / images. 4 equal rectangular shapes: 2 rows and 2 columns. And the fifth, in the middle, a circle.

See image at

http://www.busz-berl...mas/5-zones.jpg

So, the first four zones all have one rounded corner, as a shape.

How could this script be generated to place the four images and the fifth round (gif?) image in the center?



Thanks a lot,



Tamas

[tamas]

Greetings!

So, here it is where I arrived with your help and with absolute positioning:

5 zones

It is getting near to what I would like to have, however, the 5th zone, the round one in the middle... is clickable as a rectangular shape.
I would like it to work as a circle.
It is a gif file, while the others are jpg files.
As it is now, a part of the first 4 images is not clickable (what is in the rectangular area of my round image).


How can this be done?

Thanks and greetings

Tamas

[djr33]

You can make an object appear to be a circle by using an alpha channel. That's basically a "color" that is transparent, so there's a visual hole in the image. You can do this using a gif or png format image (but not jpeg). You'd set that up in your image editor then save it that way and it will look that way online on your page with no special code.

However, you can't make that actually interact with the user as anything but a rectangle in HTML. The image object will still be the full width/height.

There is one solution, however: you can use an image map to create a region on that image that is active. Image maps can be made using a number of freeware programs that allow you to draw areas then copy the HTML code. Information is easily available if you search for it.
However, image maps don't always work, so you might want to keep the full-image link as a backup and replace it with an image map in browsers that work like that. But generally image maps do work so it's fairly safe to use it.