Div onClick Change Two Other Div Image Paths

Posted on 2011-10-17
Last Modified: 2012-05-12
Hi Experts,

Thanks for reading. I'm looking for a quick script that, onClick of a <div>, it changes the image path in another div and the other image path in another div. As a sample:

<div id="switchImagePaths"></div>

<div id="image1"><img src="pathChangesOnClickOnswitchImagePathsDiv.png" /></div>
<div id="image2"><img src="pathChangesOnClickOnswitchImagePathsDiv.png" /></div>

Open in new window

Thank you!
Question by:SevenAteAnthony
    LVL 81

    Accepted Solution

    Put this in the head section :
    window.onload = function() {
        document.getElementById("switchImagePaths").onclick = function() {
            document.getElementById("image1").getElementsByTagName("img")[0].src = "";
            document.getElementById("image2").getElementsByTagName("img")[0].src = "";

    test page :
    LVL 1

    Author Closing Comment

    Thanks so much!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
    Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now