viernes, 9 de diciembre de 2016

Cambiar imagen de fondo con JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cambiar fondo</title>

    <style>
        .fondo{
            width: 500px;
            height: 200px;
            border: 3px solid #1d1d1d;
        }
    </style>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#cambio1').click(function(){
            $('#campo1').css('background-image', 'url(img/001.jpg)');
        });

        $('#cambio2').click(function(){
            $('#campo1').css('background-image', 'url(img/002.jpg)');
        }); 

        $('#cambio3').click(function(){
            $('#campo1').css('background-image', 'url(img/003.jpg)');
        });                    
    });   
    </script>


</head>
<body>
   
    <div id="campo1" class="fondo">
       
    </div>

    <a href="#" id="cambio1">Fondo 1</a>
    <a href="#" id="cambio2">Fondo 2</a>
    <a href="#" id="cambio3">Fondo 3</a>

</body>
</html>


en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)

Cambiar imagen de fondo con JQuery

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Cambiar ...