www.webdeveloper.com
Results 1 to 13 of 13

Thread: Need help changing HTML elements with JavaScript!

  1. #1
    Join Date
    Jul 2013
    Posts
    5

    Need help changing HTML elements with JavaScript!

    So basically, what I want to do is use JavaScript so when a user hovers over an image inside a div element, the image is replaced by a p element, part of which is also inside an a element. I have tried looking through the tutorials on w3schools.com and tried the "Try it yourself" examples, yet I can't make this work. I have tried using the innerHTML thing, but I can't get it to work properly with HTML tags inside it. Does anybody know how to do this? Can provide more details or explanation if needed.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,141
    Show whatever code you have now. The JavaScript required will depend on the specific HTML mark-up you're using.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2008
    Posts
    106
    Yes, please show the HTML you are working with.

  4. #4
    Join Date
    Jul 2013
    Posts
    5
    A small sample then. This isn't the exact image and text that I want because for privacy reasons I don't want to display the actual content, but same layout and orientation and, most importantly, same tags in the same places.

    Basically, I want this:

    <div style="border-style:solid;border-width:3px;border-color:green;width:200px;height:255px;text-align:center;">
    <img src="http://static.tumblr.com/nybu1ck/VoNlw0zhn/tardis_door_sign_by_tibots.jpg" width="180">
    </div>

    to change to this:

    <div style="border-style:solid;border-width:3px;border-color:green;width:200px;height:255px;text-align:center;">
    <br /><br /><br />
    <p>This is a sample image</p>
    <p><a href="example.com">Example link</a>
    </div>

    when the mouse hovers over it, and change back again when the mouse leaves the object. Is this possible? The CSS can be shoved into the head if it makes things easier to code, but for demonstrative purposes, if you want to check out what it would look like on an actual page, the basic CSS is there.

  5. #5
    Join Date
    Jul 2013
    Posts
    6
    are you use a script in a html page it creates some problem please tell me solution of this problem?
    ____________________________

    **Links removed by Site Administrator so it doesn't look like you're spamming us. Please don't post them again.**

  6. #6
    Join Date
    Jul 2013
    Posts
    6
    Why we use java script in our websites?
    _____________________________

    **Links removed by Site Administrator so it doesn't look like you're spamming us. Please don't post them again.**

  7. #7
    Join Date
    Jun 2008
    Posts
    106
    You'll need to give the main div an id. Here's a working example:

    Code:
    <div id="hover" style="border-style:solid;border-width:3px;border-color:green;width:200px;height:255px;text-align:center;">
    <img src="http://static.tumblr.com/nybu1ck/VoNlw0zhn/tardis_door_sign_by_tibots.jpg" width="180">
    </div>
    Code:
    window.addEventListener('load', function (event) {
        var hover = document.getElementById('hover');
    
        hover.addEventListener('mouseover', function (event) {
            hover.innerHTML = '<br /><br /><br /><p>This is a sample image</p><p><a href="example.com">Example link</a>';
        }, false);
    }, false);

  8. #8
    Join Date
    Jul 2013
    Posts
    5
    That works perfectly for when the mouse goes over it! But it stays after the mouse leaves the object. Is there any way you could make it to return to its original state after the mouse leaves it?

  9. #9
    Join Date
    Jul 2013
    Posts
    6
    Because java script do work faster then other a more thing in java script the page run easily.

  10. #10
    Join Date
    Jul 2013
    Posts
    5
    That works great... for when the mouse goes over the div, that is. It doesn't change back again, though, after the mouse has moved off. Is there any way it can be changed or adjusted so that it only changed while the mouse is over it, but returns to its previous state as soon as the mouse leaves?

    (PS, sorry if this double posts. After looking back here after a few hours, I don't see what I wrote before. I'm not sure if that's just because the admins haven't gotten round to checking my post yet or if I didn't send it properly, so I'm replying again just in case.)

  11. #11
    Join Date
    Jun 2008
    Posts
    106
    Quote Originally Posted by Imamadmad View Post
    That works perfectly for when the mouse goes over it! But it stays after the mouse leaves the object. Is there any way you could make it to return to its original state after the mouse leaves it?
    Sure. I'm sure there are many different ways to achieve that, but what I would do is already have both pieces of code on the page already (so there is no reflow of the page), but hide what shouldn't be shown until you hover over the main div.

    So, essentially, add the main div with 2 divs each, one with the original content and one with the modified (hover) content.
    Then, we can show *only* the hover content when you hover over the main div, and show *only* the original content when you hover off the main div.

    Code:
    <div id="hover" style="border-style:solid;border-width:3px;border-color:green;width:200px;height:255px;text-align:center;">
    <div id="original">
        <img src="http://static.tumblr.com/nybu1ck/VoNlw0zhn/tardis_door_sign_by_tibots.jpg" width="180">
    </div>
    <div id="changed" style="display: none;">
        <br /><br /><br />
        <p>This is a sample image</p>
        <p><a href="example.com">Example link</a>
    </div>
    </div>
    (I did this with IDs, but if you needed more than one, you could do it with classes or just a bunch of IDs.

    And then the JavaScript:
    Code:
    window.addEventListener('load', function (event) {
        var hover = document.getElementById('hover'),
            original = document.getElementById('original'),
            changed = document.getElementById('changed');
    
        function original_show() {
            original.style.display = '';
            changed.style.display = 'none';
        }
    
        function changed_show() {
            original.style.display = 'none';
            changed.style.display = '';
        }
    
        hover.addEventListener('mouseover', changed_show, false);
        hover.addEventListener('mouseout', original_show, false);
    }, false);

  12. #12
    Join Date
    Jul 2013
    Posts
    5
    Works perfectly! Thank you tenfold! You are a genius!

  13. #13
    Join Date
    Jun 2008
    Posts
    106
    You're welcome Glad it works.

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



Recent Articles