/    Sign up×
Community /Pin to ProfileBookmark

Javascript swap image, yet make clicked image stay the same

Hey guys, this is a tough one for me. I use Dreamweaver to program in and dreamweaver has a great image swap code that works fine. However, I have a row of buttons and when someone clicks on that button to go to a new page I want that image to stay on the rollover image untill another button is clicked.

Here is what I am trying to use, but for some reason the links quit working when i click the button. I get no Javascript error though.

What I realy want to do is have the image stay the same even if the mouse is rolled over it again. But I will settle with just making it stay the rollover image once clicked and having the URL work.

Any ideas at all are appreciated.

Thanks!

[code=php]
<script language=”JavaScript” type=”text/JavaScript”>
<!–
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];}
}

function lockImg(imgID){
if(imgID==1)window.document.getElementById(imgID).innerHTML = ‘<img src=”images/btn_home2.jpg” name=”topnav1″ width=”100″ height=”20″ border=”0″>’;
if(imgID==2)window.document.getElementById(imgID).innerHTML = ‘<img src=”images/btn_jobs2.jpg” name=”topnav1″ width=”100″ height=”20″ border=”0″>’;
}
//–>
</script>

<table>
<tr>
<td width=”100″><a href=”frame_home.php” target=”mainFrame” onMouseOver=”MM_swapImage(‘topnav1′,”,’images/btn_home2.jpg’,1)” onMouseOut=”MM_swapImgRestore()” onClick=”lockImg(1)”><div id=”1″><img src=”images/btn_home1.jpg” name=”topnav1″ width=”100″ height=”20″ border=”0″></div></a></td>
<td width=”100″><a href=”jobs_frameset.php” target=”mainFrame” onMouseOver=”MM_swapImage(‘topnav2′,”,’images/btn_jobs2.jpg’,1)” onMouseOut=”MM_swapImgRestore()” onClick=”lockImg(2)”><div id=”2″><img src=”images/btn_jobs1.jpg” name=”topnav2″ width=”100″ height=”20″ border=”0″></div></a></td>
</tr>
</table>

[/code]

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@Mr_JOct 26.2007 — Take a look at this example it may help you

www.huntingground.freeserve.co.uk/imagery/imglinks1.htm
Copy linkTweet thisAlerts:
@scragarOct 26.2007 — can I say that this does NOT need javascript to be done, a simple CSS to create a link with a background image and a hover that changes said background image works perfectly(make the image stay the same after clicking can be done with ":active").
Copy linkTweet thisAlerts:
@ArcauthorOct 26.2007 — Take a look at this example it may help you

www.huntingground.freeserve.co.uk/imagery/imglinks1.htm[/QUOTE]


Thanks for the link, I will check it out.
Copy linkTweet thisAlerts:
@ArcauthorOct 26.2007 — can I say that this does NOT need javascript to be done, a simple CSS to create a link with a background image and a hover that changes said background image works perfectly(make the image stay the same after clicking can be done with ":active").[/QUOTE]

You wouldn't happen to have an example laying around would you?

Thanks!?
Copy linkTweet thisAlerts:
@scragarOct 26.2007 — if you don't use IE you can check it out on a site I origionaly made just for my brother when he went through his "I'm gonna make a million from the internet" phase.

http://scragar.mybesthost.com?s=rollover - prompts to download in IE because it uses xhtml, since the only person I origionaly intended to use the site was my brother it use xhtml since my brother refuses to use IE.

just edit the CSS to read:#rollover:hover, #rollover:active{ instead of #rollover:hover{ and it should work.
Copy linkTweet thisAlerts:
@ArcauthorOct 26.2007 — Mr. J. that link is helpfull in a way, it makes me se something I didnt before. However, it is using the same 3 images for 3 different links. In my case, I have 8 images which are all different, each of which have a rollover image of their own.

So the code provided will not work and I am not sure how to change it to make it work since it is not ment for that purpose at all.

Thanks though!?
Copy linkTweet thisAlerts:
@scragarOct 27.2007 — [code=html]<style="text/css">
#rollover{
background-image: url(IMG1);/* change */
background-repeat: no-repeat;
background-position: top left;
height: 50px;/* change */
width: 60px; /* change */
}
#rollover:hover, #rollover:active{
background-image: url(IMG2); /* change */
}
</script>
<a href="PAGE" id="rollover"><br></a>[/code]
edit the IDs and such, you can make as many rollovers as you can think of IDs, so it's easy to edit.
Copy linkTweet thisAlerts:
@ArcauthorOct 27.2007 — if you don't use IE you can check it out on a site I origionaly made just for my brother when he went through his "I'm gonna make a million from the internet" phase.

http://scragar.mybesthost.com?s=rollover - prompts to download in IE because it uses xhtml, since the only person I origionaly intended to use the site was my brother it use xhtml since my brother refuses to use IE.

just edit the CSS to read:#rollover:hover, #rollover:active{ instead of #rollover:hover{ and it should work.[/QUOTE]


I do use IE( Who doesn't heh) and I tried dowloading the file and reading it, but it just seems over the top man.

all I need is a simple image swap script that keeps the last one clicked highlited. Exactly like the script Mr. J provided except with the ability to use different images on each button/link.

Thanks though!
Copy linkTweet thisAlerts:
@Mr_JOct 27.2007 — At the top of that page is a link to another example where each rollover has its own images

www.huntingground.freeserve.co.uk/imagery/imglinks_m1.htm
×

Success!

Help @Arc 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 5.28,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...