Rectangle 27 7

Whats wrong with pure css?

div.thumbnail:hover {
 background-image: url(image/in/question);
}

Simply change the div.thumbnail to reflect your div and class or id name (in case of id replace .with #)

That won't work in IE6.

Make sure to use a CSS Sprite to avoid a flicker in the rollover caused by the new image loading. Here is a good place to start: stackoverflow.com/questions/2932566/how-do-css-sprites-work

@Sarfraz - That may not be an issue, it's not for any of my current projects, hopefully that's the case everywhere soon.

@Nick Craver: That's true but IE6 is still around albeit with lesser number :(

I'm going to use this regardless. Users of IE6 just won't get to experience the full effect of my site. It's their loss. If we continue catering to these users, they may never see the need to upgrade. (I know a lot of users are in a corporate environment, so it's really up to the IT guys... but still)

javascript - how to change div background image in mouse over? - Stack...

javascript jquery mouseover onmouseover
Rectangle 27 2

You can use jQuery something like:

$(function(){
  $('div.someclass').hover(function(){
       $(this).addClass('hover_class');
    }, function(){
       $(this).addClass('mouseout_class');
    }
  );
});

Where you have specified the hover_class and mouseout_class in your style sheet with corresponding images eg

<style type="text/css">
 .hover_class {
    background-image: url(url 1);
 }

 .mouseout_class{
    background-image: url(url 2);
 }
</style>

but url 1 is not fixed, as I said I have 7 thumbnails so how I can display seven diff images?

javascript - how to change div background image in mouse over? - Stack...

javascript jquery mouseover onmouseover
Rectangle 27 10

FabricJS does not have a native method for getting the pixel colors.

The workaround is to use native html5 canvas to fetch the pixel data:

Good luck with your project!

Here's annotatede code and a Demo:

// create a Fabric.Canvas
var canvas = new fabric.Canvas("canvas");

// get a reference to <p id=results></p>
// (used to report pixel color under mouse)
var results = document.getElementById('results');

// get references to the html canvas element & its context
var canvasElement = document.getElementById('canvas');
var ctx = canvasElement.getContext("2d");


// create a test Fabric.Image
addFabricImage('https://dl.dropboxusercontent.com/u/139992952/multple/colorBar.png');

// listen for mouse:move events
canvas.on('mouse:move', function(e) {

  // get the current mouse position
  var mouse = canvas.getPointer(e.e);
  var x = parseInt(mouse.x);
  var y = parseInt(mouse.y);

  // get the color array for the pixel under the mouse
  var px = ctx.getImageData(x, y, 1, 1).data;

  // report that pixel data
  results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';

});



// create a Fabric.Image at x,y using a specified imgSrc
function addFabricImage(imgSrc, x, y) {

  // create a new javascript Image object using imgSrc
  var img = new Image();

  // be sure to set crossOrigin or else 
  // cross-domain imgSrc's will taint the canvas
  // and then we can't get the pixel data
  // IMPORTANT!: the source domain must be properly configured 
  // to allow crossOrigin='anonymous'
  img.crossOrigin = 'anonymous';

  // when the Image object is fully loaded, 
  // use it to create a new fabric.Image object
  img.onload = function() {

    var fabImg = new fabric.Image(this, {
      left: 30,
      top: 30
    });
    canvas.add(fabImg);

  }

  // use imgSrc as the image source
  img.src = imgSrc;

}
body {
  background-color: ivory;
}
canvas {
  border: 1px solid red;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<p id="results">Move mouse over canvas</p>
<canvas id=canvas width=300 height=300></canvas>

@markE - How to apply this method to get pixel details in whole canvas? Should loop through the canvas? How to do that?

@Dissanayake. You can get the data for all pixels like this: var allPxArray = ctx.getImageData(0,0,canvas.width,canvas.height).data;. They are arranged like this: r0,g0,b0,a0, r1,g1,b1,a1 ... :-) `

javascript - get rgb values of pixel of image in fabric.js on mouse mo...

javascript html5 html5-canvas fabricjs
Rectangle 27 2

First, note that the text moving (and if the text moves) in the pressed button has nothing to do with the <asp:Button (or the input element it renders) directly. The button styles and visual behaviour depend to a small part on the browser and to a large part on the windows version and theme the client uses. Manually moving the background image could look very weird on themes that don't actually move the text.

That said, you can emulate the behaviour relatively easy with JavaScript respectively jQuery in particular.

CSS (I used normal style here because pressing usually removes the hover style)

.btnSaveInrpvEdit.mousedown
{
    background: url(/Images/Admin/btnSave.png) no-repeat 1px 1px;
}
$("#btnSaveInrpvEdit").mousedown(function () { $(this).addClass("mousedown"); });
$("#btnSaveInrpvEdit").mouseup(function () { $(this).removeClass("mousedown"); });

You probably also have to handle the user pressing the button but then holding and dragging the cursor away from the button, which causes the button to un-press visually but will also return to the pressed state if you move the mouse back over the button. This is a bit more tricky but I'm sure you got the gist of it and can work something out ;)

As a quick fix to at least prevent the button background staying offset forever you can add

$("#btnSaveInrpvEdit").mouseleave(function () { $(this).removeClass("mousedown"); });

javascript - implementation of asp.net buttons behaviour (e.g. left mo...

javascript asp.net css button
Rectangle 27 1

here is a simple way in jquery

$(document).ready(function() {
  $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/detail-requiem.jpg)').css('background-repeat', 'no-repeat');
  $('div').css('cursor', 'pointer').click(function() {
        $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/Requiem-Julien-Levesque.jpg)');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
  <div style="background-color:yellow">Click Here to change background Image</div>
</body>

Here i will explain the code. The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

$(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

Here is what happen in the code.

$(document).ready(function(){

   // jQuery methods go here...

});

This is to prevent any jQuery code from running before the document is finished loading (is ready).It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

$("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/detail-requiem.jpg)').css('background-repeat', 'no-repeat');

getting the body element of your html and set its background-image with .css() action. which i gave it more one action

$('div').css('cursor', 'pointer').click(function() {
        $("body").css('background-image', 'url(http://julienlevesque.net/Requiem/images/Requiem-Julien-Levesque.jpg)');
    });

this is where the change takes place. i got the div to be clicked by $('div') and first gave it an action of changing the mouse to cursor to indicate its clickable and then gave it the click function, where our background-image get changed on click

javascript - div onclick function to change body background image - St...

javascript jquery css
Rectangle 27 0

To get all of the files in a directory, you need to use PHP:

function directoryToArray($directory, $recursive) {
$array_items = array();
if ($handle = opendir($directory)) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
            if (is_dir($directory. "/" . $file)) {
                if($recursive) {
                    $array_items = array_merge($array_items, directoryToArray($directory. "/" . $file, $recursive));
                }
                $file = $directory . "/" . $file;
                $array_items[] = preg_replace("/\/\//si", "/", $file);
            } else {
                $file = $directory . "/" . $file;
                $array_items[] = preg_replace("/\/\//si", "/", $file);
            }
        }
    }
    closedir($handle);
}
return $array_items;
}

You can then echo the array into your javascript:

<script type="text/javascript">
var images = new Array(
<?php
    $images = directoryToArray("bg", true);
    for($i = 0; $i < count($images); $i++)
    {
        echo "\"{$images[$i]}\"";
        if($i != (count($images)-1))
            echo ",";
    }
?>
</script>

Now that you have the array, just change the image onMouseMove:

$("body").mousemove(function(){

    $(this).css("background", "url('" + images[Math.floor(Math.random() * images.length)]+"')");

});

javascript - Random background image on mouse movement - Stack Overflo...

javascript php jquery random background
Rectangle 27 0

Definitely div with a background-position set to center center and background size to 100% 100% (note that it won't keep the aspect ratio). Keep the button title absolutely positioned, top 50% and a negative top margin (see what works the best, it should be negative 50-75% of the font size). Background-position also allows for easier image swapping on mouse over, etc. rather than having to write Javascript to change the image source on mouseover and mouseout events.

But again, you should do it the way it works the best for you.

div.button{
background: url('https://www.google.com/images/srpr/logo4w.png') center center;
text-align: center;
background-size: 100% 100%;
width:400px;
height:120px;
position: relative;
}

div.title{
width:100%;
height:100%;
top:50%;
font-size: 16px;
margin-top: -12px;
position: absolute;
}

im also not concerned about aspect ratio I will do the math before hand, as you have to use and width AND height for firefox anyway....

html - Is my idea for a robust easily resizeable button with a backgro...

html css css3 responsive-design
Rectangle 27 0

If the requirement is that one element affects the background of another, you will require JS. Assuming id="news" is the triggering element and id="BG" is the receiving element:

document.getElementById("news").addEventListener("mouseover", function() {
  document.getElementById("BG").style.backgroundImage = "url(img/southamericangrandmother.jpg)";
}, false);
document.getElementById("news").addEventListener("mouseout", function() {
   document.getElementById("BG").style.backgroundImage = "";
}, false);

i have added above code in <style>. But it doesn't work.

It does work. See an example here. If it doesn't work in your site, it's possible that there's some element on top of #BG that prevents the hover from happening. Seeing the actual HTML code would help.

in my case, i have a background in main div class and mouse over in the another image (News image), to change the main div class background.

In this case use javascript: handle mouseover/mouseout of image and change bg of needed div.

javascript - change background image when mouse over - Stack Overflow

javascript html html5
Rectangle 27 0

You can not change the background image as each mousemove event. The image could not be loaded fast enough.

I used css3 animations (with -webkit prefix only, adapt to your browser if needed). Animation is triggered only if the mouse is moving. See code below and this demo

<html>
  <head>
      <style>
          body{
           background:linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); 
          }

          body.mouseMove{

            -webkit-animation-duration: 6s;
            -webkit-animation-iteration-count: infinite;

            -webkit-animation-name: bg-change;
          }

          @-webkit-keyframes bg-change {
            0% {background:linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); }
            30% { background:linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);}
            60% {background:linear-gradient(90deg, #B3FFAB 10%, #12FFF7 90%);}
            100% {background:linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); }
          }

      </style>
    </head>
  <body>

      <script type="text/javascript">
          var body= document.querySelector("body");

          var endMoveTimeout;
          body.addEventListener('mousemove',function(){
            clearTimeout(endMoveTimeout);
            body.classList.add("mouseMove");
            endMoveTimeout= setTimeout(function(){
              body.classList.remove("mouseMove");
            },1000);
          });


          body.addEventListener('animationiteration',function(e){
            console.log(e);
          });

      </script>

  </body>
</html>

javascript - how do I get my background image to change every time the...

javascript image background onmousemove
Rectangle 27 0

You are writing an style for child element, but you need to do it for parent:

.parent_div .child_div{
    background-image: url('image.jpg');
}

.parent_div:hover .child_div {
    background-image: url('image-new.jpg');
}

javascript - changing the background image of a child div when the mou...

javascript jquery html css css3
Rectangle 27 0

.child_div{
   background-image: url("image.jpg");
}
.parent_div:hover .child_div{
   background-image: url("new_hovered_image.jpg");
}

javascript - changing the background image of a child div when the mou...

javascript jquery html css css3
Rectangle 27 0

$('#thumbnailimg').hover(function(){
    $('#changeme').css('background-image', $(this).children('img').attr('src'));
}, function(){
    $('#changeme').css('background-image', '');
});

javascript - how to change div background image in mouse over? - Stack...

javascript jquery mouseover onmouseover
Rectangle 27 0

var e = document.getElementById('id');
e.style.backgroundImage = 'url(image.gif)';
$('#id').css('background-image','url(image.gif)');
#id{
  background-image:url(image.gif);
}

#id:hover{
  background-image:url(mouseoverimage.gif);
}

javascript - change background image when mouse over - Stack Overflow

javascript html html5
Rectangle 27 0

CSS background-position attribute could probably do all of that. Just set some mouse movement handler with javascript to change the position of background elements (you'd need to have multiple as there are multiple layers of images there).

javascript - HTML5 rotating/animated background - Stack Overflow

javascript jquery css jquery-animate
Rectangle 27 0

Whats wrong with pure css?

div.thumbnail:hover {
 background-image: url(image/in/question);
}

Simply change the div.thumbnail to reflect your div and class or id name (in case of id replace .with #)

That won't work in IE6.

Make sure to use a CSS Sprite to avoid a flicker in the rollover caused by the new image loading. Here is a good place to start: stackoverflow.com/questions/2932566/how-do-css-sprites-work

@Sarfraz - That may not be an issue, it's not for any of my current projects, hopefully that's the case everywhere soon.

@Nick Craver: That's true but IE6 is still around albeit with lesser number :(

I'm going to use this regardless. Users of IE6 just won't get to experience the full effect of my site. It's their loss. If we continue catering to these users, they may never see the need to upgrade. (I know a lot of users are in a corporate environment, so it's really up to the IT guys... but still)

javascript - how to change div background image in mouse over? - Stack...

javascript jquery mouseover onmouseover
Rectangle 27 0

First, get all the images in the directory with PHP.

<?php
$images = array_map('basename', glob('path/to/images/*{.gif,*.GIF,*.jpg,*.JPG,*.jpeg,*.JPEG,*.png,*.PNG}', GLOB_BRACE));
?>

This gets all the images in the folder path/to/images. basename() strips all the absolute path and just gets an array of filenames.

Now we will need to do something with them in JavaScript, so on your web page, let's put them into a JavaScript array:

<script>
var images = <?php print json_encode($images); ?>;
</script>

By using json_encode(), we converted the PHP array into an array JavaScript can use.

Next, let's preload the images (I'm a jQuery fan myself).

<script>
(function ($) {
    $(function () {
        var images = <?php print json_encode($images); ?>;
        $.each(images, function (i, image) {
            $('<img src="path/to/images/'+image+'" style="width: 1px; height: 1px; left: -9999px;">').appendTo($('body'));
        });
    });
})(jQuery);
</script>

Then we can attach a `mousemove` event:

<script>
(function ($) {
    $(function () {
        var images = <?php print json_encode($images); ?>;
        $.each(images, function (i, image) {
            $('<img src="path/to/images/'+image+'" class="random_image">').appendTo($('body'));
        });

        var x = 0, y = 0;
        $(document).mousemove(function (v) {
            var nx = v.clientX, ny = v.clientY;
            if (Math.abs(nx-x) + Math.abs(ny-y) > 50) {
                $('.random_image').removeClass('show').eq(Math.floor(Math.random()*images.length)).addClass('show');
                x = nx;
                y = ny;
            }
        }).mousemove();
    });
})(jQuery);
</script>

Thanks. I've tried to use it but without success so far.What I don't get is why you use the <img> tag instead of putting it into the CSS (background of the body) ... is that only to preload it?

javascript - Random background image on mouse movement - Stack Overflo...

javascript php jquery random background
Rectangle 27 0

1) Using css3 -webkit-background-clip: text; - But only works in chrome & safari

#p:hover{
   background:transparent url(http://www.astrosurf.com/~buil/iris/new540/gradient1.jpg);
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
}

2) Using absolute position. It will work in all browsers. But have to check with your requirement. Not work with all kind of images.

3) You can use SVG also to generate this effect

Its not an exam to copy your answer and put there. In Your answer you sated to use -webkit-mask-image. That is wrong & we have to use background clip to make the effect & also "pure css gradient" what to do this title with OP question. Because of these reasons I didn't check the link. Please remove the -ev mark. User have to understand the answer quickly.

javascript - Replace a text color by a background image on mouse over ...

javascript jquery html css fonts
Rectangle 27 0

.parent {
  width: 150px;
  height: 150px;
}

.parent img.child {
  width: auto; /* or 100% */
  height: auto; /* or 100% */
  background-image: url('old-bkg.png');
}

.parent img.child:hover{
  background-image: url('new-bkg.png');
}

javascript - changing the background image of a child div when the mou...

javascript jquery html css css3
Rectangle 27 0

$('img').mousedown(function() {....});

with

$('img').mouseover(function() {....});

javascript - Need help on background colour on selected image mouse do...

javascript jquery html css
Rectangle 27 0

document.getElementById('BG').onmouseover = function()        
     {        
      document.getElementById('BG').style.backgroundImage = "url('image.png') no-repeat";
     };

javascript - change background image when mouse over - Stack Overflow

javascript html html5