Need Expando with a Z-index

[Lorel]

John.

Oppps. I had my index files messed up New vs old.

It's working now.

Thanks much!!

Please remove your copy on your website now as I don't want the search engines to get a copy as this will go on another site when i'm finished.

[Lorel]

BTW, I tried taking out the JS and putting it in it's own js file and then it doesn't work again. I copied the JS that what was on your page directly into the JS file and put the script tag back where it was.

I write code by hand so would rather have the JS in an external file.

Can you tell me why it's not picking up the external expando.js file?

take care
Lori

[jscheuer1]

First of all, don't worry about the page on my site. No robots allowed. That means that it will not interfere with any SEO for your site.

Though once this matter is resolved, I will be happy to and will remove the page from my personal site - just in case.

Now, the matter at hand appears to be making the script external again. The external file should contain this, and only this:

/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in  http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use */  

if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40,
speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     im.parentNode.style.zIndex = 3;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     im.parentNode.style.zIndex = 2;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump < 1) im.parentNode.style.zIndex = '';
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    im.title = '';
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };

  expConIm.ims = {};

  expConIm.r = new RegExp('\\bexpando\\b');

  if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
  }
  else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
  }
 })();
}

Call it expando.js and put it in the same folder as your page. Then on your page, replace the entire script, including its tags (which I removed in the above) with:

<script type="text/javascript" src="expando.js">
/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in  http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use */  
</script>

If you are still having problems, consult my guidelines for external scripts:

Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

<script src="some.js" type="text/javascript"></script>

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:

<script>
<!--

and

//-->
</script>

and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:

http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:

<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters, without which the script won't function.

There is also info here:

http://www.javascriptkit.com/javatutors/external.shtml

and/or let me know if you have any further questions. Let me know either way, so I can remove the demo from my site.

[Lorel]

Ahhh. I see the problem. I didn't take the JS code out of the script tags for the external JS. All fixed.

Thanks much.

[jscheuer1]

Great! I've now removed the demo from my site. I did have an alternative idea for the styles:

<style type="text/css">
.expando {
 position: absolute;
 top: 0;
}
.ex1 {
 left: 0;
}
.ex2 {
 left: auto;
 right: 0;
}
.excontainer {
 position:relative;
 float: left;
 margin: 0;
 padding: 0 2px;
 height: 137px;
 z-index: 1;
}
</style>
<!--[if IE]>
<style type="text/css">
img {
-ms-interpolation-mode: bicubic;
}
</style>
<![endif]-->

With these added hooks and inline styles in the markup:

<div class="excontainer" style="width:99px;">
<img class="expando ex1" src="images/steamed-vegetables1.gif" width="99" height="137" border="0" alt="steamed vegetables cartoon 1">
</div>
<div class="excontainer" style="width:123px;">
<img class="expando ex1" src="images/steer-bathroom1.gif" width="123" height="137" border="0" alt="steer in bathroom cartoon 2">
</div>
<div class="excontainer" style="width:105px;">
<img class="expando ex1" src="images/whipped-cream1.gif" width="105" height="137" border="0" alt="whipped cream cartoon 3">
</div>
<div class="excontainer" style="width:105px;padding-left:0;margin-left:-1px;">
<img class="expando ex2" src="images/new-muffler1.gif" width="105" height="137" border="0" alt="new muffler cartoon 4">
</div>
<div class="excontainer" style="width:122px;">
<img class="expando ex2" src="images/big-A-ranch1.gif" width="122" height="137" border="0" alt="Big A Ranch cartoon 5">
</div>

This allows the two images on the right to expand leftwards. The added conditional style for IE simply makes for better resolution of the images when small in that browser (version 7 and up).

[Lorel]

This allows the two images on the right to expand leftwards. The added conditional style for IE simply makes for better resolution of the images when small in that browser (version 7 and up).

Hi John,

Thanks for the added changes. Expanding the last two images to the left works great except but they are still out of focus on IE6 and FF on Windows. They look perfect on all browsers on the Mac. I put the "if IE" code in the style tag above the head tag on the page as I'm sure those comment tags won't work on the css page. I don't write JS script so I'm not sure how to edit it.

Alternatively, is there a way to use small images for the thumbnails along with the larger images in expando?

PS. I know the content part of the page is way below left menu on Win IE6 but I'm working on that.

[jscheuer1]

The way you are dealing with the conditional style is fine. You could even just put it in the stylesheet without the style tags or conditional, like so:

img {
-ms-interpolation-mode: bicubic;
}

It will register as invalid (in a style validator) or as an error in some non-IE browsers, but not unless someone decides to debug or validate your page.

Generally, I like to avoid that though, that's why I used the separate on page sheet with the conditional.

You can also put it like the above code block into a separate stylesheet - say, ie_styles.css - then link it to your page like so:

<!--[if IE]>
<link rel="stylesheet" href="ie_styles.css" type="text/css">
<![endif]-->

That too will avoid any errors or validation flags.

As to using thumbnails to avoid a slight distortion of the smaller images in some browsers - there are pluses and minuses to such an approach. Obviously there would be a slight improvement of the appearance of the page in some browsers. However, it would require preloading of the larger images with the risk that even if set for preloading that they might not be ready in time for mouseover enlargement. It would also require a fair bit of modification of the script to account for preloading and getting the actual dimensions of the larger images, as well as swapping the thumbnail images for their larger versions and visa versa at the appropriate moments.

I will kick this idea around the old alleged brain a bit more, but I think for the slight change in clarity of the images when small in some browsers, the costs outweigh the benefits. Especially as browsers will continue to improve in this regard, rendering any changes for them superfluous.

Though If I could determine a way to do it that wouldn't have the drawbacks I currently envision, it might be worthwhile.

P.S. In a separate development, we can make the center cartoon enlarge in a centered way (neither to the left or to the right) if you want, also the spacing between the thumbs currently looks a little off, could probably use a little tweaking.

[jscheuer1]

I've figured out a way to do this. We will need thumbnails. They should each be the size of the image when small, for example, when steamed-vegetables1.gif is small it's 99 x 137, that's the size that its thumbnail should be.

For simplicity's sake, make up the various thumbnails and put them in the images directory. Name them each the same as their larger image counterpart except with '_tbn' appended to the filename, ex:

steamed-vegetables1_tbn.gif

When you have all 5 of those made up and on the server, let me know - I will then give you the new script, styles and markup.

The way this will work is that the thumbnails will be background images for the excontainer divs. The expando images will be visibility hidden. When the mouse moves over the excontainer, its expando image will become visible and expand. When the image contracts fully, it will become hidden again. That way, whenever an expando image is small, it will not be seen, but it's thumbnail version will.

There will still be the problem that, until the larger images load, the effect will not be pretty. Without this addition, the user will see that a given larger image isn't loaded. With it, they will see the smaller, faster loading background image thumbnail first, before the larger image has loaded, but the time lag should be short. There may be a way to work that out though. While you get the thumbnails together, I'll take a crack at that.

[Lorel]

Hi John,

I reduced the images to thumbnails as you suggested and they are loaded on the server. The code has changed a little bit since my original post as I shrunk 2 of the images a bit so they would all line up with the smaller size because they didn't all have text on the bottom.

I appreciate your trying to fix this as 85% of visitors to the site are using Windows. I'm not sure if it's affecting Win IE 7 and 8 but it is on Win IE6 and FF3.

Thanks for taking the time to try and fix the resolution.

[jscheuer1]

I see the thumbnail images, thanks. I'm a little busy at the moment, or have been. I will try to get to this soon (next day or so or sooner). I do have a workable solution I've been running trials on, but also a better idea that I want to test out.

BTW, I just wanted to mention that your work (your cartoons) are pretty funny.