CODEWITHSUNDEEP
javascripthtmlcss
Maxemoss
Maxemoss

Reputation: 381

Is there a way in html or JS so that when I hover over something it changes?

More specifically, when I hover my cursor over a picture it would transform into a different picture. Or what I'm actually looking for: When I hover over text it would change into different text.

Thanks.

Upvotes: 1

Views: 356

Answers (4)

Robert Munn
Robert Munn

Reputation: 798

Yes, that is a standard function of Javascript to handle HTML DOM events. Using simple HTML/Javascript, you can attach an onmouseover event handler to run a Javascript function:

<html>
<head>
    <script>
        function changeText(obj){
            // https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
            obj.textContent = "some new text";

            // you could also use obj.innerHTML here, but 
            // that comes with security considerations
            // https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
        }
    </script>
</head>
<body>
<div id="mydiv" onmouseover="changeText(this)">Some text</div>
</body>
</html>

There are convenience functions in Javascript frameworks like jQuery as well:

$(obj).text('Some new text from jQuery');

Note that you need to include the jQuery library in your <head> block to use it.

Attaching event handlers to DOM events via inline properties like onmouseover may result in harder to manage code over the long run. Attaching event listeners via code is better:

<html>
<head>
    <script>
        function changeText(event){
            // the Event object - here called event as a variable name
            // is passed implicitly
                event.target.textContent = "some new text";
            }

            window.onload = function(){
                document.getElementById("mydiv")
                    .addEventListener("mouseover", changeText, false );
            }
    </script>
</head>
<body>
<div id="mydiv">Some text</div>
</body>
</html>

jQuery makes it easy:

$(document).ready(function() {
    $("#mydiv")
        .on( "mouseover", function(event){
            $(event.target).text('some new text');
    });
});

I suggest you Google Javascript tutorials and go through an HTML/Javascript beginner's tutorial. Mozilla Developer Network is a good place to start learning:

https://developer.mozilla.org/en-US/

If you really get interested in it, check out NodeJS for server-side Javascript:

http://nodejs.org/

Upvotes: -2

Sterling Archer
Sterling Archer

Reputation: 22395

Yes, you would use the DOM events mouseenter and mouseleave. to change the image source.

Or you could use CSS :hover psuedo-class like this:

<div class="derp"></div>

.derp {
    background-image:url(someURL);
}
.derp:hover {
    background-image:url(someOtherURL);
}

Upvotes: 7

cnsumner
cnsumner

Reputation: 533

For changing text, you'll probably want to use JS. You could do something like this:

<script type=text/javascript>
    function changetext()
    {
        var textchange2 = "new text" ;
        var id = document.getElementById("ElementToChange");
        id.innerHTML=textchange2;
    }

    function changetextback()
    {
        var textchange2 = "original text" ;
        var id = document.getElementById("ElementToChange");
        id.innerHTML=textchange2;
    }
</script>
<div id="ElementToChange" onmouseover="changetext();" onmouseout="changetextback();">original text</div>

Upvotes: -1

Paul
Paul

Reputation: 141839

Yes, it's easiest with the CSS :hover pseudo-elector.

#theimage {
  display: block;
  width: 400px;
  height: 400px;
  background: url('image1.png') 0 0 no-repeat;
}

#theimage:hover {
  background: url('image2.png') 0 0 no-repeat
}

If you want to do things that are more complicated then you can use Javascript, which can use more complicated logic and access properties and attributes like the src of an image tag.

JSFiddle

You would also probably want to preload the image so that there is no delay the first time you hover (after clearing your cache). That's done best with Javascript:

<script>
  (new Image).src = 'image2.png';
</script>

Upvotes: 1

Related Questions