SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 69
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image map with popup effect hotspot... HELP!!!

    Hello, I am just starting my jazz band web...... on it, I have an image with notes on it.... I want the user to be able to click on each note and then see pop-up information....
    I have built a image map... but I don't know how to create this popup effect.

    All I have found is clicking on the hotspot and go to another page.... but I don't want this.... I want a popup effect..
    For instance:
    - clicking on one hotspot, I want comments to appear...
    - clicking on another one, I want some photos to appear....
    - clicking on another one, I want a flash object to be show so some songs can be heard....
    I know how to do it.... by going into another page.... but I want a popup effect....

    Could you help me, please?

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    It really depends on the amount of text you want to add. If it is just a small, short sentence, you can use the alt and title attributes and write it there (IE uses the alt attribute of an image and shows it as a tooltip while other browsers do this with the title attribute)

    If the text is long, then you may want to create a few divs and use some javascript. Each div will have the text for each note, and its display will be set to none by default. When the mouse hovers the note, then you can use javascript to set the display of that particular div to whatever suits your needs.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your quick answer.... actually for some links I will need several sentences.... but for some others, like clicking on the link will show photos..... I don't know how to do it..... could you give me an example please? I would really appreciate it since I don't know a lot about JS...

  4. #4
    SitePoint Evangelist elgumbo's Avatar
    Join Date
    Nov 2002
    Location
    North West, UK
    Posts
    545
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use a script like lightbox - take a look at the demos

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.... I will have a look at it.... it is not exactly what I am looking for though.... because I don't want to exit the popup effect page.... I would have prefered that leaving the active area, the window closes itself.... but I guess if I can do something like that to start with I will be happy!!!
    Thank you

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I download it free?

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The demos are fine.... there are great.... but cannot find how to do it!!!! I have looked in google.... but cannot find "how to use it".....

    What should I do?

  8. #8
    SitePoint Evangelist elgumbo's Avatar
    Join Date
    Nov 2002
    Location
    North West, UK
    Posts
    545
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1: Download the script(s) - http://www.huddletogether.com/projec...box2/#download

    2: Upload them to your server
    and then follow the instructions on http://www.huddletogether.com/projects/lightbox2/#how

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I will look into it. Hopefully I won't have to bother you again!!
    Thank you very much once again

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have included these three Javascript files in my header : The 3 scripts are all under the js directory.
    HTML Code:
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    I have included the Lightbox CSS file. The css file is under the css directory

    HTML Code:
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    I have added a rel="lightbox" attribute to any link tag to activate the lightbox.
    HTML Code:
    <a href="images/not.gif" rel="lightbox" title="my caption">image #1</a>
    It does not work at all.... anyway I don't understand how to get the fade effect and how to chose what to show!!!
    For instance, I want to show comments, I want to show the flash player, I want to show an image .....
    I must be doing something really stupid but I don't know what!!!

    Here is my script:
    HTML Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Pagina nueva 1</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    </head>
    <body>
    <a href="images/notes.gif" rel="lightbox" title="my caption">image #1</a>
    
    </body>
    </html>
    I have checked the CSS file and make sure the referenced prev.gif and next.gif files are in the right location.
    HTML Code:
    #prevLink:hover, #prevLink:visited:hover { background: url([B]../images/prevlabel.gif[/B]) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(.[B]./images/nextlabel.gif[/B]) right 15% no-repeat; 
    Also, I have made sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location
    HTML Code:
    ...
    LightboxOptions = Object.extend({
        fileLoadingImage:        '../images/loading.gif',     
        fileBottomNavCloseImage: '../images/closelabel.gif',
    ...
    HELP!!!!!

  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In addition I don't know asp!

  12. #12
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or php!

  13. #13
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    Well, you don't need ASP or PHP for that instance. There is one thing that I don't understand, though... are we talking about Flash here? Because Flash is completely different technology.

    What the lightbox does is simply show an image when you hover the link. That image is centered on the screen and automatically changes its size to adapt to the size of the image.

    If I remember well, it will not work if you want a Flash player, or a full HTML page, on that area, unless you change the code.

    Have you tried the tooltip? As I said, it is easy to implement, and it doesn't need any programming, but it will only work with short texts, limited to 255 characters

    Code:
    <a href="whaterver.html" title="this will show as a tooltip">link here</a>
    or

    Code:
    <a href="whatever.html"><img src="pic.gif" alt="tooltip for IE if there is no title" title="tooltip for any other browsers"></a>
    Or is it that you want a more sophisticated effect, such as the one the lightbox provide?

  14. #14
    SitePoint Addict antirem's Avatar
    Join Date
    Dec 2008
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like slimbox over lightbox...

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me explain what I need.... I am building my jazz band page... On this page, I will have a few links... like "Who we are", Photos of the group, Videos, Songs we sing.
    Each time the user click on one link, I want a pop up effect window to appear.
    In one case, the pop up window will show comments....with fading effect or not...
    Sometimes it will show photos.... and each of them I would like to have the zoom effect
    Sometimes it will show videos..... don't know how to do it
    Sometimes it will show the song we sing... I have the page that already do that but I need the pop up effect....

    I don't really want to use any tool in particular... I just would like something to work!!!

    Help please!

  16. #16
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    What you want is far away from the newbie level... There's nothing that I know that can do what you want without being changed and that means programming. How good are you at it?

    Didn't anyone told you that content was king? Much more than the fancy effects.

    I'll try to find something to suit your needs, but I don't have much hope, honestly.

  17. #17
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know about java and javascript.... but I am not a genious at it.... if you can help me I would really appreciate it......
    Many many thanks

  18. #18
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,361
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have to agree with molona on this one - Lightbox is "easy" to implement once you have had a bit of experience doing similar things, but if you're new to all this then there will be learning curve.

    I suggest you concentrate on bulding a basic site to start with and use normal pages instead of your "hotspots" - get the site up and running then come back to the hotspots later on.

  19. #19
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    I need to test it, but I still think that the easiest way to go around this is using hidden divs, and playing either with the display or the visibility properties.

    I will do a test this afternoon, possibly. I let you know the outcome.

  20. #20
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have done it already. I have create my site with frames.... and links that go to other pages..... It is up and running.... but it is not good... I really want to improve it....
    If you want to have a look at it..... you will understand why I want to improve it...... www.jazzcafeparis.es

    Please, help me with this!!!

  21. #21
    SitePoint Evangelist elgumbo's Avatar
    Join Date
    Nov 2002
    Location
    North West, UK
    Posts
    545
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WHat page are you trying to implement the popup on? Is it this one? - http://www.jazzcafeparis.es/componentes.html ?

    On another note, I don't think there is any reason to use frames for your site - they will only cause you trouble in the long run. ( But that's for a different post)

  22. #22
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know you are right about the frames.... this is one of the reason I want to re-implement my site. I am having problem with the google index... my site is not recognized by Google for the moment and this is a big problem....
    That is why I need to change my site!!!

    What I actually want is having the same links... there will be notes for the links instead of simple words... clicking on each link, a "pop up effect" window will appear.
    I think that for the comments it is not difficult....
    for the "componentes one".... I could simplify it so there is no other links within this page...
    My problem is "the photo link" and the "repertorio" link...
    The first one, I would like to show the photos and clicking on them have the zoom effect....
    For the repertorio link, I need the plug in "flash 8"... It would be cool to open a pop up effect window with it.... if it is not possible, I could always add this page into the main one....
    FOr the comments ("Who are we ", "What do we offer", etc... links, I would like a fade effect.

    Could you help me?

  23. #23
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To give you an idea, I would like my new site to look like this:
    http://www.jazzcafeparis.es/index0.html ..... clicking on the links would give the pop up effect....
    It is not working but it can give you an idea of what I would like.... In this example, I am using a image map.....but it is too difficult.... I can do the same using several links and one image (a note) for each link.

  24. #24
    SitePoint Evangelist elgumbo's Avatar
    Join Date
    Nov 2002
    Location
    North West, UK
    Posts
    545
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you removed all the files for llightbox? I can't see anything uploaded for the 3 javascript files or the style sheet? eg: http://www.jazzcafeparis.es/js/lightbox.js gives me a page not found error.

  25. #25
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have not implemented it on my site (only on my PC).... I sent it only to show you what I would like.... I can upload those files if you wish...


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
  •