Jump to content
Sign in to follow this  
gaby

Java Script Rollover Image

Recommended Posts

Click aici pentru un exemplu.

Puteti face acest lucru folosind CSS ( Tutorial Aici ), dar si folosind java script.
Pentru metoda java script aveti nevoie de un script, pe care il gasiti mai jos si care trebuie adaugat intre etichetele <head></head>:
 

<script type="text/javascript">
<!--
// http://www.pctroubleshooting.ro

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;
}
//-->
</script>


Dupa ce ati adaugat acest script in pagina, nu va ramane decat sa adaugati imaginea, care folosind efectul rollover se va schimba cu alta.Codul adaugarii imaginii este urmatorul:
 

<a href="link-ul unde sa va duca atunci cand apasati pe imagine" onMouseOver = "rollover('imagine')" onMouseOut = "rollout('imagine')"><img src="adresa catre imaginea1 cu tot cu extensia ei .gif .jpg .bmp .png" name="imagine" border=0 width=145 height=29></a>
<script type="text/javascript">
<!--
setrollover("adresa catre imaginea2 cu tot cu extensia ei .gif .jpg .bmp .png");
//-->
</script>

 

!!! De inlocuit in codul de mai sus:

  • adresa catre imaginea1 cu tot cu extensia ei .gif .jpg .bmp .png
  • adresa catre imaginea2 cu tot cu extensia ei .gif .jpg .bmp .png
  • link-ul unde sa va duca atunci cand apasati pe imagine

Succes :pct2: !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×