I am building a website in HTML & suddenly i realized that i have forgotten the code of creating the image rollover & i badly need this. As i have to make this site live by this month with the final version of the site.
Its Urgent Please Help!
Member
I am building a website in HTML & suddenly i realized that i have forgotten the code of creating the image rollover & i badly need this. As i have to make this site live by this month with the final version of the site.
Its Urgent Please Help!
Member
Here the image is doing most of your work with it. Just you have to edit & put the path which is told to give at their respective places.
Hope This Might have Help You....!var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
Member
Image Rollover effect is created by java script which actually looks like this :
In this Code when the mouse mouse comes on the image the function buttondown() will perform its action & when the mouse the mouse moves away from the image then the function button down will perform its action.<a href="index.html"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')">
<img src="homebutton.gif" name="homebutton" border="0" />
</a>
But now your web page need to call the JavaScript function. So copy the following script to the HTML Source in between <head>....</head>.
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "homebutton.gif" ;
homebuttondown = new Image() ;
homebuttondown.src = "homebuttondown.gif" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
Member
Rollover Buttons with pure CSS.
You just need to create menu using the following code :
You then need to make button in vertical manner in the way you want to see on page then on rollover & then on Hit.<div class="rollover">
<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">TechArena</a>
<a href="#">Forums</a>
<a href="#">Exit</a>
</div>
After creating the images. Now you have to tie all the links in CSS 2.
.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
Posting Permissions
Reply With Quote
Bookmarks