EXPANDO script mod

[lets]

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

[jscheuer1]

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/

[lets]

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.

[jscheuer1]

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:

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

[JenniferArden]

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

[jscheuer1]

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):

<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):

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

[JenniferArden]

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