Public Schedule Face-to-Face & Online Instructor-Led Training - View dates & book

role over pics

ResolvedVersion CS3

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.

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

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

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 courses

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
What does 'Resolved' mean?

Any suggestions, questions or comments? Please post in the Improve the forum thread.

Dreamweaver tip:

Creating line breaks

If you want to create a line break hold down Shift+Enter.

View all Dreamweaver hints and tips

Connect with us:

0207 987 3777

Call for assistance

Request Callback

We will call you back

Server loaded in 0.09 secs.