Results 1 to 7 of 7

Thread: EXPANDO script mod

  1. #1
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default EXPANDO script mod

    http://www.dynamicdrive.com/dynamici...pandoimage.htm

    I'm wondering if it might be possible to make a slight mod to the new EXPANDO script.

    I'd like to be able to add to the js file so that when the image expands, a line of text appears under the image. The line of text would be the same for every image that expands. Any ideas?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The script itself doesn't necessarily need modification for this. That sort of thing may be done with ordinary style and simple javascript events. See the cat here:

    http://home.comcast.net/~jscheuer1/side/expando/
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's almost PERFECT! Just what I'm looking to do. But, for complicated reasons, I need to be able to do that by altering only the js file.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That would be more than a simple modification. When I get some time, I'll look into it. But let's set at least one parameter first. Could we have markup like:

    HTML Code:
    <div>
    <img class="expando" src="cat.png" alt="" width=250 height=137>
    <span class="line"><br>&nbsp;</span>
    </div>
    for each image that you want to receive this treatment? The span and container division could have other class and/or id names and/or style if you wanted them to, but the above is the bare bones markup required to make this relatively easy.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Expando - include tooltip / line of text

    Hi John,

    Thank you for this great script! I would like to ask if its possible to add a tooltip to an image or some text near the expanding image? I did try your previous suggestions but could not figure out how to make it work. I use the default tooltip option in FrontPage 2003 but it doesn't work when using Expando script and also not working in FireFox which is why I am looking for an alternative. I don't mind modifying each page individually to include a tooltip or a line of text. A tooltip would be great but a line of text is fine too. I appreciate you reading this.

    Jennifer

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    A tooltip is out of the question without extensive modification. In fact, the script strips title attributes to prevent that. If the mouse goes over a title attribute, it has gone off of the expanded image, so it will shrink. A separate DOM element tooltip could be used, but it would have to be setup to, when it's moused over, to not trigger the usual onmouseout event of the expanded image.

    The method outlined in my demo here:

    http://home.comcast.net/~jscheuer1/side/expando/

    for the cat image will work though. View its source code to see the important parts which are the style (the important one is highlighted):

    Code:
    <style type="text/css">
    img {
    border: none;
    vertical-align: top;
    }
    .shield {
    margin-top: 1em;
    }
    .cat {
    margin: 0 0 1em 1.5em;
    }
    .line {
    visibility: hidden;
    }
    </style>
    and in the markup (additions highlighted):

    Code:
    <div>
    <img class="expando cat" src="cat.png" alt="" width=250 height=137 
    onmouseover="document.getElementById('catline').style.visibility='visible';" 
    onmouseout="document.getElementById('catline').style.visibility='';">
    <span class="line" id="catline"><br>Line of text</span>
    </div>
    Notice the color coded id and class names. Something similar can be setup for as many expando images as you like. You may use the same class for all the lines, but the id (catline here), must be unique for each expando image.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Expando - tooltip / text

    Hi John,

    Thank you for taking the time to reply I appreciate it a lot. I will try to follow your instructions as soon as I have a chance and give you feedback on my attempts.

    Jennifer

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
  •