Forum home » Delegate support and help forum » Dreamweaver Training and help » dreamweaver course - Layers
|
|
|
The UK's most regular 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 course - Layers
Resolved · Low Priority · Version Standard
Reply Wed 31 Oct 2007, 08:52Delegate Stephen said...
Stephen has attended:
Project Intro Intermediate course
Dreamweaver 8 Introduction course
Dreamweaver 8 Intermediate course
Layers
Hi, I've created a web page with lots ( 160 thumbnail photos )
Is there any way to select all thumbnails and so that when the mouse hovers over any thumbnail a small layer that I've created appears with a message to click that picture to enlarge, rather than do this process 160 times ?
Thanks
Regards
For upcoming training course dates see: Pricing & availability
RE: Layers - alt, title or tooltips
Hi Stephen,
To do this, I wouldn't use Layers as such. I'd either use:
1) 'alt' and 'title' text like this:
<img src="thumnail01.jpg" title="click to enlarge" alt="click to enlarge">
The ALT tag usually pops up when hovered in Internet Explorer. The TITLE tag usually pops up when you hover over in FireFox. But neither of these are guaranteed.
2) A free Javascript 'tooltip' pre-written script like this one:
http://www.walterzorn.com/tooltip/tooltip_e.htm
This allows you to put some code within your image tags like this:
<img onmouseover="Tip('Click to enlarge')" src="thumbnail01.jpg">
In either case, you can then use Dreamweaver's 'Find and Replace' tool to replace all occurrences of <img with <img onmouseover="Tip('Click to enlarge')"
This would be a quick way.
Let me know if you want any more info, or questions on the above.
Regards, Rich
Reply Wed 31 Oct 2007, 13:24Delegate Stephen said...
RE: Layers - alt, title or tooltips
Thanks,
Could you just elaborate on option 1 on just what I need to do, and the find and replace tool to add to all images
RE: Layers - alt, title or tooltips
Sure,
For option 1, each image can (and should according to accessability standards) have an 'ALT' parameter, which is a short description of the image. These descriptions are important to people who for example use screen readers - eg. the reader reads the description of the image to the blind person.
Internet Explorer uses the Alt paramater to display a ToolTip when the mouse is hovered over the image. So you can put whatever you want in the Alt paramater to appear when your users hover over the image.
To do this in Dreamweaver, select your image, and look at your Properties Panel. You should see a textbox for 'Alt'.
Because you have so many images on your page, to add an Alt parameter for each image would take a long time. So I'm suggesting you edit the HTML code (switch to View -> Code or View -> Code and Design for split screen).
A basic image tag looks like this:
<img src="thumbnail_01.jpg"> where 'thumbnail_01.jpg' is the actual image filename.
To add a parameter within code view, go to the end of the tag (before the last > sign), press space (you need to separate each parameter with a space), type the parameter name (alt), an equals sign (=) and then the value enclosed in quotes ("click to enlarge"). So you should end up with something like this:
<img src="thumbnail_01.jpg" alt="click to enlarge">
Now, in this case, it doesn't matter which order the parameters appear. So you could also have the ALT paramater at the start, like this:
<img alt="click to enlarge" src="thumbnail_01.jpg" >
And the reason I'm suggesting this is because it will make your 'find and replace' command easier.
Go to Edit -> Find and Replace (or Control+F). The dialogue box that appears lets you change parts of the code. So if you put <img in the 'find' box, and <img alt="click to enlarge" in the 'replace' box, then press 'Replace all' - Dreamweaver will effectively 'add on' the alt tag to every image.
If you don't want to add the alt tag to ALL your images (ie. you have other images that aren't thumbnails), then you may want to just keep pressing 'Find next' and 'Replace' - this allows you to check each bit of code Dreamweaver finds.
Hope this helps.
Let me know how you get on.
Regards, Rich
PS. don't forget that other browsers may not display the ALT parameter as a tooltip - eg. Firefox doesn't. However, you can try using the TITLE paramater in the IMG tag, because browsers like Firefox DO show TITLE as a tooltip - it's best to have both.
|