4
2010
Substitution Image Script ...
Create a rollover image with Dreamweaver ...
Example and comments for the Dreamweaver tool, "Rollover Image" (Rollover).
Image changes when mouse over.
- Bootstrap ...
I want to put two different examples for the replacement of an image when mouse over ...
We'll do one of two ways;
1 - With the tools in Dreamweaver ...
by a script that automatically generates Dreamweaver
2 - Using CSS code manually ... inside or outside the file.
This option is fine, but has some limitations.
Well, if you want to try how it works in Dreamweaver,
follow these steps and you can personally verify this tool ...
Get two images of similar measures for the example, then you can make your own checks on the sizes and others in this type of finish.
The format of the images does not matter, all you have to type the extension (Image Format) in the ...
<img src" Url-relativa-absoluta/imagen-y- format "/>
Well said this started with the checks, and see how we get this issue ...;
Create a new empty HTML file, if you have not already open.
For this test, do as you like, create a paragraph <p> test image hosting </ p>
or click anywhere in the document, then elejgir "Insert" from the Tools You Need bar as in the example of the previous picture and the context menu you choose the option appears, "Image Objects" and then " Rollover Image. "
- HACT often do you look like the window below to create ...
This is very easy to create, with the help of the wizard is "Chupao ..."
Before continuing I want to say that once you fill in the fields and accept, your application will create a script automatically, and lodged between
<head> </ head> of your document, including mandatory labels are ...
> </script> <script type= "text/javascript"> </ script>
Well let's fill in the fields, taking into account that you have prepared for the test images, and you can see this window as the picture I put up.
I want to see more or less fill in the fields ...
- Fill in the required fields ...
- Name of the picture ...
Simple, choose any name.
- Original image ...
Is the image you see primero.Puedes put a URL on the document using the wizard with the "Browse" button, or you can type an absolute URL to your image, like "http://www.internavegacion.com"
- Image Rollover ...
Is the image that you will pass the mouse over is the one that replaces the first. You can follow the steps to locate the image in the same way as in the previous case.
- Alternative text ...
This part is for the description of the image, or information that you want to show the image.
- When Clicked Go to URL ...
This part is the image that will link to the Web or anywhere else you want to open when clicked.
These are all simple steps to create a rollover with two images.
Once you have filled the fields correctly, as it will accept the script for this ejemplo.Se <head> be between the </ head>.
Remember, you can create a document where this script host and link your document by;
src=" http://www.tu-web/tu-archivo.js "> </script> "text/javascript" type= http://www.tu-web/tu-archivo.js <script src=" "> </ script>
Well, I have placed an image for example and you can check this by passing the mouse over ...
The code has been created in the current document is the changing image for this ...
<A href = "http://www.internavegacion.com" onmouseout = "MM_swapImgRestore ()" src = "http://www.internavegacion.com/imagenes-blog/imagen-1.jpg" alt = "rollover" name = "image2" width = "97" height = "97" border = "0" id = "image2" /> </ a>
Well these are the steps to create a rollover Dreamweaver, rather it is the application itself does all the trabajo.No is exactly the measure used this type of script to replace an image, but I do believe that CSS can do great finishes.
We see it in the next file, or from the cover of International Navigation .
I recall that this script is created entirely by the program Dreamweaver CS, to whether the credits are for the folks at Adobe, the truth make great applications for the design.
2 Comments Add a comment
Leave a comment
Blog Content
- Dreamweaver CS (4)
- Html-Css Editors (3)
- Facilities Program (2)
- Joomla - CMS (4)
- The Pictures (2)
- Linux (2)
- News (20)
- Photoshop CS (3)
- Wampserver local server (5)
- Topics code (8)
- PC Themes (1)
- Wordpress Themes (4)
- A bit of everything ... (7)
- Youtube Videos (2)
Translator
Records
- January 2012 (5)
- December 2011 (2)
- November 2011 (3)
- August 2011 (2)
- July 2011 (8)
- June 2011 (7)
- May 2011 (8)
- April 2011 (3)
- March 2011 (2)
- February 2011 (3)
- December 2010 (3)
- September 2010 (1)
- August 2010 (5)
- July 2010 (6)
- March 2010 (5)
- January 2010 (1)
Subscribe to this RSS feed
Last comments
- manu on New update support Joomla 2.5 with LTS
- Michan in New update support Joomla 2.5 with LTS
- manu on New update support Joomla 2.5 with LTS
- Anonymous on New update support Joomla 2.5 with LTS
- Bitacoras.com in New update support Joomla 2.5 with LTS
- manufacturing in the FBI closes Megaupload and other file downloads Webs
- Michan in The FBI closes Megaupload and other file downloads Webs
Input Tag
Alonso Apache body CMS Place Pictures Tips CSS Dreamweaver CS4 Dreamweaver Editor html editor F1 Firefox Formula 1 Forum Gif Gnome html -kit Html Image Rollover images html-kit Install Linux Wubi install joomla Jpg KDE Sinde law Linux Mysql paragraph Photoshop PhpMyadmin plugins Png Software Script local server substitution Ubuntu Wampserver windows wordpress Wubi Wysiwyg Youtube
WP Cumulus Flash tag cloud by Roy Tanck Requires Flash Player 9 or better.
Possibly, but this is just one example.
I guess that can be done in several ways.
regards
It is preferable to perform this task with CSS, dreamweaver cpodigo tends to generate much garbage.