/    Sign up×
Community /Pin to ProfileBookmark

Replacing One Image With Another Image

Copy linkTweet thisAlerts:
Oct 08.2013

Hello JavaScript Masters!

I’m pretty new to JavaScript, so forgive me, but I’m trying to replace an image with another image onMouseUp…and vice versa. Basically a play/pause button. I like using inline JavaScript, but if that’s not possible then I understand.

Since I am trying to learn more about JavaScript, I would welcome guidance on how to achieve this instead of just the code. However, I can usually figure stuff out if I mess with it, so if just posting the code is easier then I can probably still figure out how you did it.

Your Humble Apprentice,

-Bman

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@bionoidOct 08.2013 — Here is an inline example:

<img src="image1.png" [COLOR="#FF0000"]onmouseup="this.src = 'image2.png';"[/COLOR] alt="" />

"this" refers to the element that the event was triggered on, so IMG in this case.
Copy linkTweet thisAlerts:
@bman84authorOct 08.2013 — Bionoid,

Thank you! How could I have been so dumb? For whatever reason I never tried to do it the image...only the <a> tag.

Your code does change the image from the first to the second, but I also was hoping to be able to click it again an it go back to the first...and so on. Is that possible and still achieve the proper function of each button?

You Humble Apprentice,

-Bman
Copy linkTweet thisAlerts:
@bionoidOct 08.2013 — Before I change things to simply switch between images, are there other buttons that could also influence what state your play button is on.... like a "stop" button?

[Play/Pause] [Stop] [Rewind] [Forward]

Also, are there other events that need to be called based on each state? Like a startTrack or pauseTrack Javascript function.
Copy linkTweet thisAlerts:
@bman84authorOct 08.2013 — Yes. I am just making a simple Play, Pause, and Stop player where the play and pause are in the same place. So...

[Play/Pause] [Stop]
Copy linkTweet thisAlerts:
@bman84authorOct 08.2013 — I have an interesting idea. I'd like your thoughts. I currently use an iframe with my audio element on it. My site runs completely in the iframe. I do this so that my music plays throughout the entire site without having to restart on ever page. Do you think it would be possible to have the player/controller be on my homepage but still be able to control the audio element in the parent iframe?

I really appreciate your help thus far. I've already learned something new...which is why I came here.
Copy linkTweet thisAlerts:
@bionoidOct 08.2013 — I know I've gone a little overboard. If the audio part of your site is event driven, then you can trigger those events with your set of buttons.

Added it as an attachment so you can see the goofy pictures I used as well ?

[canned-message]attachments-removed-during-migration[/canned-message]
Copy linkTweet thisAlerts:
@bman84authorOct 08.2013 — Haha! I love them! Let me work on implementing that and I'll let you know if I have any further questions. Thank you so much for your help!
Copy linkTweet thisAlerts:
@bman84authorOct 08.2013 — Ok...so here's what I'm thinking. I will create a JS file with one function that contains the <audio> element and additional functions controlling it. I'll call the first function on my iframe and the other functions on my home page. Hopefully that will give me the result I'm looking for.

What do you think?
Copy linkTweet thisAlerts:
@bionoidOct 08.2013 — I really don't know which is better. Personally I try not to use elements like <iframe>.

If you want to keep the music going continuously, you could use AJAX to change the content of your pages instead.
Copy linkTweet thisAlerts:
@bman84authorOct 08.2013 — JavaScript was/is intimidating enough right now. I'm a beginner after all. HTML was pretty easy, but JavaScript is kind of kicking my butt right now. Maybe after I am proficient in that I can move on to AJAX and other stuff. I just don't think my brain can handle it right now. Haha!
×

Success!

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