I've asked this before, but i still dont get it. In simple terms please, how do you change a linked image into another image when you hover over it?
Linked image???
Hey!
please be clear with your question pls...it wld ve been nice if gave us more info...abt wht exactly you want.
Assuming that you want change your image with another image.
Solution to this is.....
you need to put some image source address...to get that imgae get it loaded while browsing.
in html...you can do it like
%26lt;a%26gt;%26lt;href="image source"%26gt;Text you want %26lt;a%26gt;
where
image source is some url where image actualy stored.
However,in Java script(DHTML) it depends on folder structure in which you will put your website.
suppose you have
folder1----%26gt;%26gt;Folder2------%26gt;Image.jpg
and you have index.html in folder2
thn simply "./folder2/image.jpg"
else if you gotta image in folder 1 and index.html in folder2
i.e. Different folder then
"../folder1/image.jpg"
if you gotta move them with slideshow
You need MACROMEDIA FLASH or other slideshowmaker
after buliding that use following code..
%26lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-4... codebase="http://download.macromedia.com... width="1000" height="500" vspace="25"%26gt;
%26lt;param name="movie" value="../images/folder1.swf"%26gt;
%26lt;param name="quality" value="high"%26gt;
%26lt;param name="BGCOLOR" value="#000000"%26gt;
%26lt;embed src="../images/folder1.swf" width="1000" height="500" vspace="25" quality="high" pluginspage="http://www.macromedia.com/g... type="application/x-shockwave-flash" bgcolor="#000000"%26gt;%26lt;/embed%26gt;%26lt;/object%26gt;
hope this will help you
Cheers:)
Reply:That's a JavaScript image rollover.
You'll find a free Javascript to help you do that at:
http://www.javascriptkit.com/javatutors/...
Be sure to preload the images with an OnLoad event. There's a tutorial to help you do that at the bottom of the script page.
Reply:In your web page editing software select the "Rollover image" option and it will give you 2 boxes, 1 for the initial image and 1 for the hover change image. You can also do a search on Rollover image java script on Yahoo and use it.
Reply:You can do that using image editing software, I use macromedia fireworks to do that.
Reply:http://www.htmlcodetutorial.com/images/i...
go here and follow instructions
Reply:Seems to me that that would depend on what software program your linked image is embedded to. Your software program should have editing capabilities where you can either change the link but not the picture (icon), or change the picture (icon) but not the link. When asking this type of question, you need to be more detailed in your description of your problem and/or required solution to get answers that will help you. Your question is too general.
Reply:u r not very clear with ur quest. but still i believe that u are looking for rollover image which u can get either from ur code editor in menus or with the following code snipplet:
(all images shuld be in the same folder in whilch ur web file is)
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;script%26gt;
function over()
{
img1=new Image();
img1="any image";
document.imga.src=img1;
}
function out()
{
img2=new Image();
img2="any image";
document.imga.src=img2;
}
%26lt;/script%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;a href="image"%26gt;
%26lt;img src="image" onMouseOver="over()" onMouseOut="out()"%26gt;
%26lt;/a%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
Reply:To do this you just need to create a rollover image.
Here is the coding that you would use:
%26lt;a href="http://www.cnn.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image','','lo... src="logo2.jpg" name="Image" width="228" height="108" border="0"%26gt;%26lt;/a%26gt;
Here is what this line of code means:
What is in the quotes following the a href is the link that you want the image to lead to after clicking on it.
On on Mouse Over in the parenthesis the first item in the single quotes is the Image name, the next item is the image location for the image that will appear when you roll the mouse over it.
The image scr is the location for the original image that will appear first on the website.
Hope this helps.
Reply:It requires the onMouseOver and onMouseOut events. You don't need to use JavaScript, just HTML
Look:
%26lt;a href="http://site.com/"%26gt;%26lt;img src="image_source" onMouseOver="image_source_when_hover" onMouseOut="image_source" /%26gt;%26lt;/a%26gt;
This way, when the cursor hovers over the image, the 'image_source' turns into 'image_source_when_hover'.
When the cursor goes away, it turns back into 'image_source'.
When clicked, it links to http://site.com/
Hope you get what I mean.
P.S. Please do not click on the links here.
Reply:You can create linked images that rollover without
using Javascript. I have made some very complicated
rollover effects using CSS. The problem with using
Javascript is that sometimes people have Javascript
turned off in their browsers. Using CSS ensures that
your visitors will get these kewl rollover effects.
%26lt;html%26gt;
%26lt;head%26gt;
%26lt;title%26gt;Image Rollover Demonstration%26lt;/title%26gt;
%26lt;style type="text/css"%26gt;
p.link a, p.link a:visited, p.link a:hover
{
font-size:12px;
text-decoration:underline;
color:#ffffff;
font-weight:bold;
background:url(thumb_hibiscus.jpg);
width:75px;
height:75px;
background-repeat:no-repeat;
text-align:center;
border:0;
}
p.link a:hover
{
background:url(hibiscus.jpg);
width:300px;
height:300px;
}
%26lt;/style%26gt;
%26lt;/head%26gt;
%26lt;body%26gt;
%26lt;div align="center"%26gt;
%26lt;p%26gt;Here's how to make an image rollover without using javascript.%26lt;/p%26gt;
%26lt;p class="link"%26gt;%26lt;a href="http://yahoo.com" title="yahoo rox"%26gt;Visit Yahoo%26lt;/a%26gt;%26lt;/p%26gt;
%26lt;/div%26gt;
%26lt;/body%26gt;
%26lt;/html%26gt;
I have been teaching HTML, web design and CSS Online
for over 2 years now. This example is a very simple way
to implement this effect.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment