role over pics
Microsoft Office TrainingThe UK's Number 1 for Microsoft Office Training Sitemap add this page to your favourites/bookmarksBookmark page
 
view a printable version of this pagePrintable version
Plus One Google
Customer: Sign in
Delegate: Sign in
Trainer: Log in

Forum home » Delegate support and help forum » Dreamweaver Training and help » Role over pics

Role over pics

resolvedResolved · Medium Priority · Version CS3

replyReplySat 28 Mar 2009, 09:10Delegate Rob said...

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.

For upcoming training course dates see: Pricing & availability

replyReplyMon 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

replyReplyThu 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

replyReplyFri 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.

 

 

Please browse our web site to find out more about
dreamweaver course uk and other Microsoft training courses.

Dreamweaver tip:

Toggle panels on and off

Press the F4 key to toggle all the panels in Dreamweaver on or off. This gives you more editing and programming screen space.

View all Dreamweaver hints and tips

forum postCan the custom auto filter work between columns

» Forum post: Formulas


Rate this page:
2.2/5 (213 votes cast)
Accredited Training Provider: Institute of IT Training Institute of Leadership and Management - Certified Courses
Microsoft Certified Partner
Security Seal verified by visa, mastercard securecard

Mini sitemap. These are the main areas of our web site. Full sitemap.

Management training

Professional Skills courses
Project Management Course London
Project Management Courses London
Project Management Training London
Project Management Training
Project Seminar
Project Seminars
Time Management Course London
Time Management London
Time Management Courses London
Time Management Training London
Introduction to Finance course
Assertiveness Skills course
Effective Communications Skills training
Presentation Skills London

Training Formats

Public scheduled courses
On-site training
Closed company courses

Consultancy
Application Development

Blogs

Excel Training
MS Project Training
Microsoft Training Blog

Version differences

Office 2010 vs 2007
MS Project version differences

Training Information

London Computer Training
Computer Training London
Docklands Training Courses
Docklands Training London

Training venues London
Client list
FAQ
Pricing and availability
Course details / Syllabus

Training Articles
Training Information

Microsoft training

Microsoft Office training
& IT Applications

Microsoft Project training
Microsoft Outlook training
Microsoft Powerpoint training
Microsoft Word training
MS Project courses
MS Project training
Outlook courses
PowerPoint courses
PowerPoint training
VBA courses
Word courses
Microsoft.training
(more...)

Excel Training

Excel courses
Excel Training Courses Medway
Autonumber in Excel
Microsoft Excel training
Basic Excel Courses
Basic Excel Course
Basic Excel Training

Interested in MS Access training?

Access courses
Microsoft Access training
Microsoft access courses
Microsoft training access course
Microsoft+access+training
Access courses in london

Training provider

Training providers
IT training companies
IT training providers
Management Training providers
Management Training provider

Event history, feedback results
Events in 2012 · 2011 · 2010 · More

See also

Crystal Reports training