trying to write a disjointed rollover... Stuck...

4 posts by 3 authors in: Forums > CMS Builder
Last Post: December 9, 2008   (RSS)

By HDLLC - September 5, 2008

Hi there-

Trying to write a disjointed rollover to have a thumbnail image show in a main window that is the larger, default image. Check included image.
I'm trying to have the a click on a thumb at right, show the image (big version) in the window at left (larger image).

I wrote this using a couple of colored squares - but can't seem to cross it over to the dynamically generated content. (using onmouseover, instead of onclick)

Here's the test:
http://www.southdakotawild.com/swap-test/test.html

Now, I need to have that apply to my image tags, which look like this:
<?php foreach ($farmsRecord['image_1'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="<?php echo $upload['urlPath'] ?>" target="_blank"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="160" height="120" alt="" border="0" /></a><br/>
<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>

Any ideas...?

Thanks in advance!

--Jeff

Re: [HDLLC] trying to write a disjointed rollover... Stuck...

By Dave - September 5, 2008

Hi Jeff,

Do you have an url with the output generated by CMS Builder?

You may need to preload the images like this: MM_preloadImages('red.gif','blue.gif') but with the actual image names.

Can you post an url with the generated content (the CMS version)? Then I can compare the sources of the working mockup and the CMS generated one.

Thanks!
Dave Edis - Senior Developer
interactivetools.com

Re: [HDLLC] trying to write a disjointed rollover... Stuck...

By Stensy - December 9, 2008 - edited: December 9, 2008

Hi HDLLC

I was working on something similar a few weeks ago. I hope this helps.

Add this to your page header, make sure to set the pathway correctly. It links to the attached JS file.
<script type="text/javascript" src="js/navigation.js"></script>


Here is your CMSB image loop, I added the javascript in red to the loop. The part in green is the name of the main image or main div where you want the image to load, so just create a placeholder image or div with a static size. In my case I used another image which then changed to the image that the user rolled over. (below)

Rollover Image Loop

<?php foreach ($yourRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a href="javascript:;" onmouseout="MM_swapImgRestore();" onMouseOver="MM_swapImage('mainimage_r3_c6'[/#80ff00],'','<?php echo $upload['urlPath'] ?>',1)"> [/#ff0000]<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /></a>
<?php endif ?>
<?php endforeach ?>[/#000000]

My placeholding image!
Please note the name of the image placeholder below it must be the same as the green mainimage_r3_c6 above, this can be changed however to what ever you like.

<?php foreach ($yourRecord['image'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img name="mainimage_r3_c6[/#00ff00]" src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" />
<?php endif ?>



Hope this helps a little it may not be what you asked for though.
Attachments:

navigation.js 2K