Home/ Questions/Q 7492593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T16:28:28+00:00

I’m beginner and write some HTML code but what I need is when I

  • 0

I’m beginner and write some HTML code but what I need is when I click on div to change background image… How I can do that?

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#kat1 {
    background-image:url(ikoniceKategorije/07.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat1:hover {
    background-image:url(ikoniceKategorije/07h.jpg);
    }

#kat2 {
    background-image:url(ikoniceKategorije/06.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat2:hover {
    background-image:url(ikoniceKategorije/06h.jpg);
    }

#kat3 {
    background-image:url(ikoniceKategorije/05.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat3:hover {
    background-image:url(ikoniceKategorije/05h.jpg);
    }

#kat4 {
    background-image:url(ikoniceKategorije/04.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat4:hover {
    background-image:url(ikoniceKategorije/04h.jpg);
    }
#kat5 {
    background-image:url(ikoniceKategorije/03.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat5:hover {
    background-image:url(ikoniceKategorije/03h.jpg);
    }

#kat6 {
    background-image:url(ikoniceKategorije/02.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat6:hover {
    background-image:url(ikoniceKategorije/02h.jpg);
    }

#kat7 {
    background-image:url(ikoniceKategorije/01.jpg);
    width:30px;
    height:30px;
    float:left;
    }
#kat7:hover {
    background-image:url(ikoniceKategorije/01h.jpg);
    }
#div {
    width:220px;
    height:30px;
    overflow:hidden;
    }

</style>
</head>

<body>
    <div id="div">
        <div id="kat1"></div>
        <div id="kat2"></div>
        <div id="kat3"></div>
        <div id="kat4"></div>
        <div id="kat5"></div>
        <div id="kat6"></div>
        <div id="kat7"></div>
    </div>
</body>
</html>

or you can see at on http://www.pluspon.com/kategorije.html what I plan to do. Change Image on hover and on click also… THANKS !!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using jQuery you could do something like this:

    $(document).ready(function () {
    $("#kat1").click(function () {
        $(this).css("background-image", "xxx.png");
    });
});

    If you wan´t to toggle you could do:

    $("#kat1").click(function () {
    if ($(this).css("background-image") == first_Image) {
        $(this).css("background-image", second_Image);
    }
    else {
        $(this).css("background-image", first_Image);
    } 
});

    });

    • 0