Jump to content

Java Script Rollover Image


gaby

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: !

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.