/    Sign up×
Community /Pin to ProfileBookmark

Requested Script

Copy linkTweet thisAlerts:
Aug 20.2006

Hi, I’m new here and I don’t know much more than the fundamentals of javascript. I would like to request a script if someone out there is interested. I’ve searched for awhile for a free one that matches my needs but to no avail.

Here is what I need: I have a page, it consists of an iframe and about 100 button links. The links are all targeted at the iframe. What I would like to do is when a button link is clicked I would like for it to roll-over or just change the image to a different one until another/different link is clicked which would then convert the first button back to it’s original state and change the button just clicked. It is most important that the button stay its changed image until another is clicked.

Any help with this would be most appreciated. I’m sure it’s something simple but I just don’t know enough to convert a regular roll-over script to do this. Thanks again.

Aperson

Even a link to a page that has this set-up would be a great help.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesAug 20.2006 — No need to use icky JavaScript:[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
iframe {margin-left:12em}
ul {margin-left:0; position:absolute; top:1em; left:1em}
li {margin:1em 0}

a:link, a:visited, a:hover {
background:#aaa;
color:#a00;
display:block;
text-align:center;
text-decoration:none;
width:10em;
}

a:active {
background:#a00;
color:#aaa;
display:block;
text-align:center;
text-decoration:none;
width:10em;
}
</style>

</head>
<body>
<iframe name="foo-bar" src=""></iframe>
<ul>
<li><a href="" target="foo-bar">Fee</a></li>
<li><a href="" target="foo-bar">Fie</a></li>
<li><a href="" target="foo-bar">Foe</a></li>
<li><a href="" target="foo-bar">Fum</a></li>
</ul>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@apersonbeingauthorAug 20.2006 — Hmm interesting, is there a code that works with button images as well? I'd post pictures of what I'm trying to accomplish but not sure if that's allowed here. That code works like a charm in I.E. but doesn't seem to work in Opera. I do appreciate your taking the time to post this and answer my reply. It would be perfect if it worked in Opera and used images. Beggars can't be choosers though eh? Thanks again.
Copy linkTweet thisAlerts:
@CharlesAug 20.2006 — Don't use JavaScript for this, use CSS:[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<base href="http://www.bettiepage.com/images/photos/bikini/bikini1_a.jpg" target="foo-bar">

<style type="text/css">
body {background-color:#fff}

iframe {margin-left:12em}
ul {margin-left:0; position:absolute; top:1em; left:1em}
li {margin:1em 0}

a:link, a:visited, a:hover {
border:solid 2px #fff;
display:block;
text-align:center;
text-decoration:none;
height:72px;
width:72px;
}

a:active {
border:solid 2px #a00;
display:block;
text-align:center;
text-decoration:none;
height:72px;
width:72px;
}

a span {display:none}
</style>

</head>
<body>
<iframe name="foo-bar" src=""></iframe>
<ul>
<li><a href="bikini1.jpg" style="background-image:url(bikini1_a.jpg)"><span>Bettie 1</span></a></li>
<li><a href="bikini2.jpg" style="background-image:url(bikini2_a.jpg)"><span>Bettie 2</span></a></li>
<li><a href="bikini3.jpg" style="background-image:url(bikini3_a.jpg)"><span>Bettie 3</span></a></li>
<li><a href="bikini4.jpg" style="background-image:url(bikini4_a.jpg)"><span>Bettie 4</span></a></li>
</ul>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@apersonbeingauthorAug 20.2006 — Ok this is how the links look when page first loads:

[img]http://www.imperialabsoc.com/aperson/pics/sample_buttons_start.png[/img]

Now when you click on the world 104 button it will change the world in the iframe without reloading the link page. When a link is clicked I want its image to change to the selected world button like so and remain this way until another world link is clicked:

[img]http://www.imperialabsoc.com/aperson/pics/sample_buttons_select1.png[/img]

And then when another link is clicked it will do this: returning the world 104 button back to it's original state and changing the world 22 button to the the selected world image:

[img]http://www.imperialabsoc.com/aperson/pics/sample_buttons_select2.png[/img]

I would really like to do this with the button images I created. The CSS code you provided is very cool and simple which makes it even better, but it still doesn't work in Opera(the border doesn't stay) and I'm not sure how to apply changing images with it or if it's even possible. As you can see with my pictures I'm using two different images for every button so...

Anyways, thanks again. I appreciate your effort in trying to help me. If nothing else I learned a new way to make cool text links. ?
Copy linkTweet thisAlerts:
@apersonbeingauthorAug 20.2006 — Thats funny Charles, I just now did a search trying to find something to help and low and behold I get that exact link in a different post. Thank you Charles for being so helpful ?
×

Success!

Help @apersonbeing 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,
)...