 | | |
|
willbegood
User
Jul 15, 2008, 7:39 PM
Post #1 of 3
(742 views)
Shortcut
|
|
Roll Over effect with images
|
Can't Post
|
|
Hello, i need to do a "before > after" effect showing images.
The idea is to use a rool over effect.
So i create in my menu 1 field upload "before" and another one "after".
No i'm trying to put all this in this :
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','after.jpeg',1)"><img src="before.jpeg" name="Image5" border="0" id="Image5" /></a>
How to?
I have the following code that show my "before" image
<?php foreach ($record['imagestate1'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><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 ?>
And i have this second one code that display the "after" image.
<?php foreach ($record['imagestate2'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><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 ?>
|
|
| |
|
willbegood
User
Jul 15, 2008, 8:05 PM
Post #2 of 3
(740 views)
Shortcut
|
|
Re: [willbegood] Roll Over effect with images - Solved BUT
[In reply to]
|
Can't Post
|
|
I solve it my self!
Here is the code
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','',' <?php foreach ($record['imagestate2'] as $upload): ?>
<?php if ($upload['isImage']): ?>
<?php echo $upload['urlPath'] ?>
<?php endif ?>
<?php endforeach ?>',1)"><img src="<?php foreach ($record['imagestate1'] as $upload): ?>
<?php if ($upload['isImage']): ?>
<?php echo $upload['urlPath'] ?>
<?php endif ?>
<?php endforeach ?>" name="Image5" border="0" id="Image5" /></a>
Of course it's comming with the following javascript
<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)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
|
|
| |
|
Donna
Staff
/ Moderator
Jul 16, 2008, 5:10 PM
Post #3 of 3
(704 views)
Shortcut
|
|
Re: [willbegood] Roll Over effect with images - Solved BUT
[In reply to]
|
Can't Post
|
|
Hi there!
Glad to hear you got that figured out. :)
Donna
Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.
|
|
| |
|
