/    Sign up×
Community /Pin to ProfileBookmark

javascript rollovers

hello javascript coders.

I am completing this site:
[url]http://www.wentworthconstructions.com.au/projects-residential-complete.html[/url]

The problem:
The image gallery in the bottom right hand corner of the page needs to “highlight” when rolled over. At the moment only the text link rolls over.

Sorry if this id really easy…i just dont have the skills.

below is the code im using so far..thanks for your help in advance.

function linkOn(refA)

{

var x = document.getElementsByTagName(“a”);

for (t=0; t<x.length; t++)

{

if (x[t] == refA)

{

x[t].style.color = “#000000”;

}

}

}

function linkOff(refA)

{

var x = document.getElementsByTagName(“a”);

for (t=0; t<x.length; t++)

{

if (x[t] == refA)

{

x[t].style.color = “#998349”;

}

}

}

<!–

if (document.images)
{
imgtest2on= new Image(150,100);
imgtest2on.src=”elwood-foreshore-sails-roll.jpg”;

imgtest2off= new Image(150,100);
imgtest2off.src=”elwood-foreshore-sails-thum.jpg”;

<!–

imgtest4on= new Image(150,100);
imgtest4on.src=”child-care-center-tr.jpg”;

imgtest4off= new Image(150,100);
imgtest4off.src=”child-care-center-tn.jpg”;

<!–

imgtest5on= new Image(150,100);
imgtest5on.src=”trainstation-roll.jpg”;

imgtest5off= new Image(150,100);
imgtest5off.src=”trainstation-tn.jpg”;

}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + “on.src”);
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + “off.src”);
document[imgName].src= imgOff;
}
}

//–>

<!–

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@vwphillipsNov 05.2007 — [CODE]
<div id="projects-imgs">

<div id="img-projects-icon"><a href="resi-sandringham.html" onmouseover= "linkOn(this.href);MM_swapImage('imgtest6','','http://www.wentworthconstructions.com.au/resi-sandringham-roll.jpg',1)" onmouseout= "linkOff(this.href);MM_swapImgRestore()"><img src="http://www.wentworthconstructions.com.au/resi-sandringham-tn.jpg" name="imgtest6" border="0" id="imgtest" /></a></div>
<div id="img-projects-icon"><a href="resi-north-rd.html" onmouseover= "linkOn(this.href);MM_swapImage('imgtest2','','http://www.wentworthconstructions.com.au/resi-north-rd-roll.jpg',1)" onmouseout= "linkOff(this.href);MM_swapImgRestore()"><img src="http://www.wentworthconstructions.com.au/resi-north-rd-thumb.jpg" name="imgtest2" border="0" id="imgtest" /></a></div>
<div id="img-projects-icon"><a href="resi-esplanade.html" onmouseover= "linkOn(this.href);MM_swapImage('imgtest3','','http://www.wentworthconstructions.com.au/resi-esplanade-roll.jpg',1)" onmouseout= "linkOff(this.href);MM_swapImgRestore()"><img src="http://www.wentworthconstructions.com.au/resi-esplanade-thumb.jpg" name="imgtest3" border="0" id="imgtest" /></a></div>
<div id="img-projects-icon"><a href="resi-cromer.html" onmouseover= "linkOn(this.href);MM_swapImage('imgtest4','','http://www.wentworthconstructions.com.au/resi-cromer-roll.jpg',1)" onmouseout= "linkOff(this.href);MM_swapImgRestore()"><img src="http://www.wentworthconstructions.com.au/resi-cromer-thumb.jpg" name="imgtest4" border="0" id="imgtest" /></a></div>
<div id="img-projects-icon"><a href="resi-hastings.html" onmouseover= "linkOn(this.href);MM_swapImage('imgtest5','','http://www.wentworthconstructions.com.au/resi-hastings-roll.jpg',1)" onmouseout= "linkOff(this.href);MM_swapImgRestore()"><img src="http://www.wentworthconstructions.com.au/resi-hastings-thumb.jpg" name="imgtest5" border="0" id="imgtest" /></a></div>
<div id="img-projects-icon"><a href="resi-brighton-8.html" onmouseover= "linkOn(this.href);MM_swapImage('imgtest0','','http://www.wentworthconstructions.com.au/resi-bright-8-roll.jpg',1)" onmouseout="linkOff(this.href);MM_swapImgRestore()"><img src="http://www.wentworthconstructions.com.au/resi-bright-8-thumb.jpg" name="imgtest" border="0" id="imgtest0" /></a></div>

</div>
[/CODE]
Copy linkTweet thisAlerts:
@dfhectikauthorNov 07.2007 — Thanks mate...Silly me..Now I have found another bug which i hope someone has a solution for or someone can see the error in the javascript.

What I have found is that after you have rolled over a thumb and the text has changed to black, when you then come off the thumb and the text goes back to gold, when you then go to roll over the text it no longer goes to black.

This is occurring in both Safari & Firefox.

Any ideas?
Copy linkTweet thisAlerts:
@vwphillipsNov 07.2007 — [CODE]<div id="content">

<h3 class="h3-prop"><strong>PROJECTS.// RESIDENTIAL<br /></strong></h3>
<div id="pprop"><a href="resi-esplanade.html" onMouseover="lightup(this,'imgtest3')" onMouseout="turnoff(this,'imgtest3')" >Brighton, 78 The Esplanade</a><br />
Private Residence in "Golden Mile"<br /><br />
<a href="resi-north-rd.html" onMouseover="lightup(this,'imgtest2')" onMouseout="turnoff(this,'imgtest2')">Brighton, North Road </a><br />
6 Luxury Townhouses<br /><br />

<a href="resi-brighton-8.html" onMouseover="lightup(this,'imgtest0')" onMouseout="turnoff(this,'imgtest0')">Brighton, 8 Weatherly Grv</a> <br />
2 Storey Luxury Home<br /><br />
<a href="resi-cromer.html" onMouseover="lightup(this,'imgtest4')" onMouseout="turnoff(this,'imgtest4')">Beaumaris, Cromer Road<br />
</a>7 Townhouses<br /><br />
<a href="resi-hastings.html" onMouseover="lightup(this,'imgtest5')" onMouseout="turnoff(this,'imgtest5')">Hampton, Hastings Street <br /></a>Single level home<br /><br />


<a href="resi-sandringham.html" onMouseover="lightup(this,'imgtest6')" onMouseout="turnoff(this,'imgtest6')">49 Bay Road, Sandringham<br /></a>
30 Luxury apartments and 2 penthouses

</div>
</div>
[/CODE]



[CODE]function lightup(obj,imgName){
obj.style.color = "#000000";
if (document.images){
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(obj,imgName){
obj.style.color = "#998349";
if (document.images){
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
[/CODE]
Copy linkTweet thisAlerts:
@dfhectikauthorNov 08.2007 — Many thanks! And best wishes..that works.
Copy linkTweet thisAlerts:
@dfhectikauthorNov 08.2007 — Many thanks..that fixed the bug...
×

Success!

Help @dfhectik spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...