Home/ Questions/Q 8835411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T09:15:21+00:00

when i click the add image button a new image appears when i click

  • 0

when i click the add image button a new image appears
when i click the new image can i revert it back to my previous state using jquery…showing the previous image with add image on hover

http://jsfiddle.net/6MmMe/37/

providing my js code below

$("div").hover(
  function () {
    $("<div>add image</div>").click(function() {
        $(this).parent().unbind("hover").children("img").attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");
        $(this).remove();
    }).appendTo(this);
  }, 
  function () {
    $(this).find("div:last").remove();
  }
);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that you are handling the first div, then removing it. There are a few ways to accomplish what I think are your goals.

    I would recommend doing it with hide/show for easier management.

    If you want to do this in jQuery, you can do it like this:

    <!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
div div { color:red; display:none}
</style>
<script>
$(function(){
$('body > div').hover(function(){
    // show "add image"
    $('div', this).show(); 
}, function(){
    // hide "add image" and reet image src. 
   $('div', this).hide();
   $('img', this).attr("src", "http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg");
})
// top-level click handler
.click(function(){
        $('img', this).attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");              
    });
}); 

</script>
</head>

<body>
  <div>
    <img src="http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg" alt="Nov-12" title="Food Network Magazine" class="cover">
    <div href="#">add image</div>
</div>

</body>
</html>

    If you want to do this mostly in CSS, just toggling a class with jQuery, you can do this:

    <!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
body > div {
background-image: url(http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg);
    width: 170px;
    height:222px;
    position:relative;
}
body > div.newImage:hover {
    background-image: url(http://www.onlinegrocerystore.co.uk/images/goodfood.jpg);
    width: 249px;
    height:274px;
}
div div { 
    color:red;
    position:absolute;
    bottom:0;
    margin-bottom:-16px;
    display:none;
}
div:hover div {
    display:block;
}
</style>
<script>
$(function(){
    $('body > div').click(function(){
       $(this).addClass('newImage');
    }).hover(false, function(){
        $(this).removeClass('newImage');
    });​
}); 
</script>
</head>
<body>
    <div>
        <div>add image</div>
    </div>
</body>
</html>

    If you really prefer to add/remove things, you can do it like this:

    <!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
div div { color:red;}​
</style>
<script>
$(function(){
    $('body > div').hover(function(){
        // show "add image"
        $(this).append('<div>add image</div>');
    }, function(){
        // hide "add image" and reset image src. 
       $('div', this).remove();
       $('img', this).attr("src", "http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg");
    })
    // top-level click handler
    .click(function(){
        $('img', this).attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");              
    });
}); 
</script>
</head>
<body>
    <div>
        <img src="http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg" alt="Nov-12" title="Food Network Magazine" class="cover">
    </div>
</body>
</html>
    • 0