Results 1 to 11 of 11

Thread: Replacing One Image With Another Image

  1. #1
    Join Date
    Oct 2013

    Replacing One Image With Another Image

    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,


  2. #2
    Join Date
    Dec 2011
    Centurion, South Africa
    Here is an inline example:

    <img src="image1.png" onmouseup="this.src = 'image2.png';" alt="" />
    "this" refers to the element that the event was triggered on, so IMG in this case.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Oct 2013

    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,


  4. #4
    Join Date
    Dec 2011
    Centurion, South Africa
    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.
    JavaScript: Learn | Validate | Compact | bionoid

  5. #5
    Join Date
    Oct 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]

  6. #6
    Join Date
    Oct 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.

  7. #7
    Join Date
    Dec 2011
    Centurion, South Africa
    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
    Attached Files Attached Files
    JavaScript: Learn | Validate | Compact | bionoid

  8. #8
    Join Date
    Oct 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!

  9. #9
    Join Date
    Oct 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?

  10. #10
    Join Date
    Dec 2011
    Centurion, South Africa
    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.
    JavaScript: Learn | Validate | Compact | bionoid

  11. #11
    Join Date
    Oct 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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.10897 seconds
  • Memory Usage 2,956KB
  • Queries Executed 16 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (11)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (11)postbit
  • (1)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (74):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • fetch_postattach_query
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • postbit_attachment
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates