Creating Rollover images is pretty simple, here's how Dreamweaver does it.
When a rollover scenario is created, this script gets inserted in the head
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
To preload the rollover image(s) this code gets inserted in the opening <body> tag code :
<body onload="MM_preloadImages('path_to/your_normal_image.jpg','path_to/your_rollover_image.jpg')">
And where the rollover image is to appear, this code is inserted:
<a href="http://www.your_site.com" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('image_name','',’path_to/your_rollover_image.jpg',1)"><img
src=”path_to/your_normal_image.jpg" alt="your_alt_text" name="image_name" width="296" height="90" border="0"
id="Image1" /></a>
To integrate this into CMSB:
Add the javascript above to the head section of your page, then to preload your images:
For a multi record editor on a list page, you’d insert this into the opening <body> tag
<body onload="MM_preloadImages('<?php foreach ($your_tableRecords as $record): ?><?php foreach
($record['your_roll_over_image_field'] as $upload): ?>’<?php echo $upload['thumbUrlPath'] ?>’, <?php endforeach;
?><?php endforeach; ?>’blank.jpg’)">
(The call to blank.jpg adjusts the syntax of the commas between entries.)
For a single record editor or a detail page the code would be:
<body onload="MM_preloadImages(<?php foreach ($your_tableRecord['your_rollover_image_field'] as $upload): ?>’<?php
echo $upload['thumbUrlPath'] ?>’, <?php endforeach; ?>’blank.jpg’)">
(Note: If you’re adding a series of roll over images to some you already have, just add their calls to the end of the
existing preload list)
Then in the Body, you’d insert the following where you wanted the rollovers to be displayed.
For a multi record editor on a list page, you’d insert:
<?php foreach ($your_tableRecords as $record): ?>
<a href="http://www.your_site.com"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('<?php echo $record['num'] ?>','','<?php foreach ($record['your_roll_over_image_field'] as
$upload): ?><?php echo $upload['thumbUrlPath'] ?> <?php endforeach; ?>',1)">
<img src="<?php foreach ($record['your_normal_image_field'] as $upload): ?><?php echo $upload['thumbUrlPath'] ?>"
name="portfolio" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" border="0"
<?php endforeach; ?>id="<?php echo $record['num'] ?>" /></a>
<?php endforeach; ?>
The names and ids of your images must be unique. I’ve used the record number to accomplish this, but you can use any
unique field value that is associated with the record.
For a single record editor or detail page with multiple single image fields you’d use:
<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?>
<a href="http://www.your_site.com"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage(<?php echo $upload['info1'] ?>','',’<?php echo $upload['thumbUrlPath']',1)">
<img src=”<?php echo $upload['thumbUrlPath'] ?>" alt="your_alt_text" name="<?php echo $upload['info1'] ?>"
width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>border="0" id="<?php echo
$upload['info1'] ?>"" /></a>
<?php endforeach; ?>
The names and ids of your images must be unique. I’ve used info2 to accomplish this, but you can use any info field
value that is associated with the image.
<a href="http://www.your_site.com"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?><?php echo
$upload['info2'] ?><?php endforeach ?>','','<?php foreach ($your_tableRecord['your_roll_over_image_field'] as $upload):
?>
<?php echo $upload['thumbUrlPath'] ?><?php endforeach ?>',1)">
<img src=”<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?><?php echo
$upload['thumbUrlPath'] ?><?php endforeach ?>"
alt="<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?><?php echo $upload['info2'] ?><?php
endforeach ?>”
name="<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?><?php echo $upload['info2'] ?><?php
endforeach ?>"
width="<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?><?php echo $upload['thumbWidth']
?><?php endforeach ?>"
height="<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?><?php echo $upload['thumbHeight']
?><?php endforeach ?>"
border="0"
id=<?php foreach ($your_tableRecord['your_normal_image_field'] as $upload): ?><?php echo $upload['info2'] ?>
<?php endforeach ?>" />
</a>
<?php endforeach ?>
There are many ways to slice and dice the rollover scenario, but if you mock it up in HTML first, and then replace the
values as needed with your PHP calls, keeping in mind the unique identifier requirement, you should be fine.
|
