/    Sign up×
Community /Pin to ProfileBookmark

Change pictures on mouse over and on click

Copy linkTweet thisAlerts:
Jun 19.2006

Hi everyone

I have link in menu on the web and picture in other pleace (on this web) and how do that:

when i mouse over the link i want change picture to other (same size), when i move cursor to other place picture change to default, but if i click on the link the picture change to other and stay.

If it’s possible please help

BR
Pumpkin

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceJun 19.2006 — I was only able to set this up for IE, for now. If needed, I can get it working for Mozilla, too (later).

<script type="text/javascript">

var defaultImage = "pic1.jpg";

function SwapImage(obj, src, e) {

if(e.type=="click") {

obj.src = defaultImage = src;

return false;

}

if(e.type=="mouseout") obj.src = defaultImage;

else if(e.type=="mouseover") obj.src = src;

return true;

}

</script>

<img name="myimage" src="pic1.jpg">

<a href="pic2.jpg"

onclick="return SwapImage(document.images['myimage'], this.href, event)"

onmouseout="return SwapImage(document.images['myimage'], this.href, event)"

onmouseover="return SwapImage(document.images['myimage'], this.href, event)"
>link text</a>
Copy linkTweet thisAlerts:
@PumpkinauthorJun 19.2006 — Thank you very much works great ?

If you will have more time please write for me this script for Mozzila too.

Again big thanks.

BR

Pumpkin
Copy linkTweet thisAlerts:
@JPnycJun 19.2006 — I always felt that this sort of thing works fastest with the JS inside the tag, however that only works with certain doctypes.

edit: I should correct that. It will still WORK with any doctype, but the page won't validate.
Copy linkTweet thisAlerts:
@PumpkinauthorJun 19.2006 — I have a little question for you.

What i must do in code to change page in frame when i click on the link

becasue in code is <a href=pic.jpg> this is for second pic

Menu with picture is in first frame and page loaded on second frame.
Copy linkTweet thisAlerts:
@phpnoviceJun 19.2006 — To use the link for actual navigation, you can change it as follows:

<script type="text/javascript">

var defaultImage = "pic1.jpg";

function SwapImage(obj, src, e) {

if(e.type=="click") defaultImage = src;

if(e.type=="mouseover") obj.src = src;

else obj.src = defaultImage;

return true;

}

</script>

<img name="myimage" src="pic1.jpg">

<a href="...some url..."

onclick="return SwapImage(document.images['myimage'], 'pic2.jpg', event)"

onmouseout="return SwapImage(document.images['myimage'], 'pic2.jpg', event)"

onmouseover="return SwapImage(document.images['myimage'], 'pic2.jpg', event)"
>link text</a>
Copy linkTweet thisAlerts:
@PumpkinauthorJun 19.2006 — I have next problem ?

In menu i have 5 position and default picture (ex. "pic1")

When i mouse over (change temporary to "pic2") or click in first position (link) "pic1" change to "pic2" and stay (this is ok thanks [B]phpnovice[/B])

If i mouse over or click on second link i want change "pic2" to "pic3" like first

link 3 "pic3" to "pic4" and next

And ex. if i click on previous link or other change actualy pic to pictures from link what i click

If i won't click on any link change default "pic1" to "pic2", "pic3" and other temporary (when mouse over)

How do that because i'm newbbie in JS ?
Copy linkTweet thisAlerts:
@phpnoviceJun 19.2006 — Note, I edited my post above to fix the quotes problem.

Otherwise, the code is set up so that the default image is the last one clicked. This one will always be used on mouse out. If you want something different, you need to learn enough JavaScript ([URL=http://www.webreference.com/programming/javascript/diaries/]JavaScript Tutorial[/URL]) to change it yourself. If I (or somebody else) does everything for you, then what have you learned except to be forever dependent?

I also checked and the code I posted is good for Mozilla, too.
Copy linkTweet thisAlerts:
@PumpkinauthorJun 19.2006 — Ok i will try and post results.

Thank you very much for your help.

BR

Pumpkin
Copy linkTweet thisAlerts:
@PumpkinauthorJun 19.2006 — Many thanks you are my guru ?

All work As I wanted

BR

Pumpkin
Copy linkTweet thisAlerts:
@phpnoviceJun 19.2006 — You're welcome.

Cheers.
×

Success!

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