I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?
Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.
You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}
Related
I am trying to use heatmap.js to create a heatmap, following the instructions from this post: How to render heatmap.js on an image?
All of my code is identical to the one at that example. Just a simple generated heatmap with a background image added in CSS. Please see this screenshot from that post :
But I want to display an image on top of the heatmap, so a foreground image instead of a background image.
I have tried using plotly, but unfortunately this is intended to run on an ESP-32, with SPIFFS, so I am extremely limited to space and processing power. Even after I used the partial bundle to get the file size down small enough, the web page just simply wouldn't load. I'd really prefer to use heatmap.js if possible anyways, since it has a much smaller footprint.
To further explain what I'm trying to do, I want to put this half-transparent image on top of the generated heatmap:
So the final desired result would look like this, displaying only the heatmap inside the transparent part of the foreground image:
All the code I am using is identical to the previously mentioned post, just a simple generated heatmap with a background image added in CSS. I also used this documentation here to build an example heatmap, https://www.patrick-wied.at/static/heatmapjs/docs.html
Is there any easy way to do this using HTML/CSS/JavaScript?
I don't know heatmap so cannot test this, but from the info given in the question if the placing of a background image works as shown then the placing of a foreground image should be possible.
What we do is style an after pseudo element on #heatmap, give it the correct dimensions, put it above the heatmap element using z-index and give it the required image as its background. The image should then appear to be sitting above the heatmap element - I assume obscuring part of it.
You need to make sure that the heatmap element is positioned so its after pseudo element knows where to position itself in relation.
#heatmap {
width: as you want
height: as you want
background-image: if you still want it to have one
any other styling you want heatmap to have
position: relative;
}
#heatmap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
background-image: url(the image you want to be in the foreground);
background-size: cover; /* or contain depending on what you want */
background-repeat: no-repeat;
background-position: center center; /*or wherever you want it */
}
}
After looking through W3Schools I'm still not sure if this is possible or not.
The idea is to have the div be a progress bar. (Yes, I am aware of jQuery UI's progress bar.) I would like it to start out 100% filled with one background-image, but overtime have it fill from 0%/100% to 100%/0%.
I see that it is possible to have multiple background images specified using css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple
but I am not sure how to extend that logic to having only % widths. Any ideas? Thanks
You can't set the width of a background image. But the solution is easy. The div by itself is the progress bar at 0% (so has the unloaded background image), then have another div inside that which is the actual progress (which animates from 0% to 100% and has the loaded background image). So you animate the width of the div inside the progress bar to represent progress.
This site has a few examples that use a span within a div:
http://css-tricks.com/css3-progress-bars/
it's not using images (just CSS3), but you could easily update it have background images on both the span and the div. CSS3 does allow multiple background images (http://www.css3.info/preview/multiple-backgrounds/) but I'm not really sure if it's the best use for your example.
Using position: absolute; or position: relative;, it's possible to overlay one image with another; you'll have to be careful with the z-index, though. You'll then be able to animate the width of the image you want to act as the 'progress meter' using jQuery's animate() function, like this (assuming your progress meter image width starts out at 0px and will end up at 100px):
$("#progress_meter").animate( {"width": "100px"}, 5000);
No, but you can set another div on top of the initial div and have a higher z-index property.
For example, on the code below, div-a will be on top of div-b:
.div-a {
with: 50%;
height: 30px;
z-index: 2;
}
.div-b {
width: 100%;
height: 30px;
z-index: 1;
}
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.
I have a picture of a shirt on my html webpage, and what I want is to be able to show a hidden image that is on the shirt by clicking a button, however I want it to become part of the shirt like if it were a hidden photoshop layer so basically with a button click it would cycle through different designs changing on the shirt itself, is there anyway to do that or is the image always going to have a square background?
Thanks,
What about making your 'shirt image' the background of div and inside that div have an img of which you change the src attribute with a simple javascript.
Have a look at this idea:
HTML
<div id="shirtimagebackground">
<img id="overlay" src="overlayX.png"/>
</div>
CSS
#shirtimagebackground {
background-image: url(shirt.png);
width: Xpx;
height: Ypx;
}
#overlay {
width: 100%;
height: 100%;
}
You need to use a combination of javascript, and a absolutly positioned, hidden, image using css.
This image will have to be a .png with apha transparency.
Bear in mind that Internet Explorer 6 does not support transparency, so if this browser is in your target market include a "png fix" like DD_belated.
You can have a see through background with solid images on the top, and place the image over your t-shirt image. However, not all tools allow you to do this (for example, Microsoft's paint does not provide this functionality). One free open source tool that I've used before that has this functionality is Paint.net. Look into "Transparency - Alpha" if you go with that paint program.
I remember reading somewhere (a long time ago) that sprites - or at least I think that's what they were called - were better than using two images when you were trying to change an image on hover. I believe the reasoning was something to do with not having a delay. For example sometimes I'll go to a website and go to click on a link and for a split second there's no image there... it's blank... before the second one shows up. Isn't that because the second image has to load first? If that's the case wouldn't "sprites" be better?
Now which ever way is the better approach I'd like to take. Basically, I have a form button I want to change with an image... and when hovered over I want it to change.
I googled and found out doing something like <input type="image" ...> would work, but than other people were saying that's not the right way yady yady ya.
So how should I do it? Sprites or separate images? And most importantly, how can I do it?
Many thanks,
The Novice.
Yes spirits are better in terms of performance/bandwidth, you should have a look at:
CSS Sprites: Useful Technique, or Potential Nuisance?
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Saving Bandwidth and Improving Site Speed Using CSS Sprites
Also have a look at:
CSS Sprite Generators
CSS Sprites are the way to go, else you'd have to "preload" your hover image.
Let's assume your button is 100px wide and 20px high.
Create a new 100px by 40px image, placing your "default" state image on the top, and your "hover" state image on the bottom.
Then in your HTML, create your button.
<input type="button" class="submit" />
Apply your new image as a background on the button element.
.submit {
display: inline-block;
width: 100px;
height: 20px;
border: 0;
background: url(button_bg.gif) no-repeat top;
}
Then simply change the position of the background image on the hover state.
.submit {
background-position: bottom;
}
Your hover image would have already been loaded, so there won't be any delay.
Have fun!