98.7% Of all customers recommend us, we're so confident about our results we publish all reviews and stats
View Live Stats View Reviews
Forum home » Delegate support and help forum » Dreamweaver Training and help » Role over pics
Role over pics
Resolved · Medium Priority · Version CS3
Sat 28 Mar 2009, 09:10Delegate Rob said...
Rob has attended:
No courses
Role over pics
i want to place a small pic on my site and when the curser is roled over it the pic then appears in a larger size how would i do that thnx BOB.
Mon 30 Mar 2009, 11:33Trainer Rich said...
RE: role over pics
Hi Rob,
Thanks for your question.
You could do this a number of ways. Probably the best is to create a DIV, initially hidden (Display: 'none'), that contains the larger picture.
Then set a Behaviour (onMouseOver) on the smaller (thumbnail) picture that turns the DIV's Display status to 'block', and vice versa for onMouseOut.
Dreamweaver has a Behaviour for this called MM_showHideLayers.
Here is some sample code:
<html>
<head>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var x,p,v,obj,args=MM_showHideLayers.arguments;
for (x=0; x<(args.length-2); x+=3)
with (document) if (getElementById && ((obj=getElementById(args[x]))!=null)) { v=args[x+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body onload="MM_showHideLayers('larger_image_div','','hide')">
<img src="small_image.gif" onmouseover="MM_showHideLayers('larger_image_div','','show')" onmouseout="MM_showHideLayers('larger_image_div','','hide')" />
<div id="larger_image_div"><img src="larger_image.jpg" /></div>
</body>
</html>
To learn more about Dreamweaver and skills like this, perhaps you'd like to attend our Dreamweaver CS3 Introduction course.
If this answer resolves your query, please mark the question as 'resolved' (see below). Otherwise, please post a follow-up response to this post, and I will assist you further.
Regards, Rich
Thu 2 Apr 2009, 16:32Delegate Rob said...
RE: role over pics
Thanx for the replie
i realy dont want to sound dim but i built my site myself and i think it works well but i have never used code and realy dont understand any of what you put yep DIM
My role over button idea worked well but the pic stays small
Im going to be made redundant soon and realy want to do more photographic work but need the site to shine without investing lots of cash
any help is gracefully welcomed
checkout www.rlwhitephotography.co.uk
and please feel free to comment BOB
Fri 3 Apr 2009, 17:08Trainer Rich said...
RE: role over pics
Hi Bob,
The site looks okay to me, fairly basic, but as long as it's showing off your photos, nothing else really matters.
The photos did load a bit slowly though, make sure you resize your photo dimensions in a program like Photoshop. Don't just upload the full sized photo and then 'squash' the photo on the page using HTML 'width' and 'height' parameters. Because it means the visitor is loading full sized photos, but not seeing them full size on the screen. Makes your site slower.
You don't need to understand the code if you have Dreamweaver, that's the point of it. Read up on Behaviours in Dreamweaver's Help/Tutorial section (see 'About' menu) Add the 'Show/Hide Layer' behaviour to your smaller image.
If you want your site to shine without investing loads of cash, may I suggest a pre-built template? You can buy these fairly cheaply and there are loads of web sites that sell them. They should be able to help you set up and install them on your web space too.
We're a training company. So the only help we can give is to suggest you come onto one of our Dreamweaver courses. See 'training' tab on this site for more details, or my link in previous post.
May I suggest http://www.smugmug.com to you - as I feel their service is very well priced, comes with support and photos really do look a lot better on that site. Plenty of templates to choose from. See their support and FAQ pages for more info. It's certainly where I'd go if I were a photographer.
Good luck.
Regards, Rich
Fri 10 Apr 2009: Automatically marked as resolved.
Training information:
|
Welcome. Please choose your application (eg. Excel) and then post your question. Our Microsoft Qualified trainers will then respond within 24 hours (working days). Frequently Asked Questions
Any suggestions, questions or comments? Please post in the Improve the forum thread. |
Dreamweaver tip:Paragraph formattingin Dreamweaver if you type in text and press entre you get double line spacing. |
