Results 1 to 6 of 6

Thread: Image Swap and HTML5 audio effect - clickable

  1. #1
    Join Date
    Aug 2006
    Location
    Budapest, Hungary
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down Image Swap and HTML5 audio effect - clickable

    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...

  2. #2
    Join Date
    Aug 2004
    Posts
    9,885
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

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

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

  3. #3
    Join Date
    Aug 2006
    Location
    Budapest, Hungary
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    THANKS, ddadmin!

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

    Thanks a lot,

    Tamas

  4. #4
    Join Date
    Aug 2006
    Location
    Budapest, Hungary
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down Overlapping images / zones

    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

  5. #5
    Join Date
    Aug 2006
    Location
    Budapest, Hungary
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •