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.
Related
Changing a color of a png image button on hover is a basic example for me to start with:
HTML <a class="button" href="#" title="Trail Button (Dummy button)"></a>
CSS .button { display: block; float: left; width: 100px; height: 100px; background: url('#hover-img-url') bottom; }
.button:hover {background-position: 0 0;}
example Jiddle for above code
By using one single image (all buttons in one image), I want the same hover effect for all image buttons.
for example:
Trail Fiddle: I used one 'arrow' button that is present inside a portion of a group image (image consisting of other buttons as well).
My Questions:
Is this a good way to implement or is there any other way to do this?
Is there any name with which we call this kind of single image helping for multiple image hovers?
It is difficult to select a portion of a image and use this portion as a button. Is there any other automated way to select Height and width of a portion of a image? If so, how to make use of that portion of a image (button) without loosing accuracy in the button hover effect?
Use image Sprites
Online generator with CSS markup included: http://www.spritecow.com/
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');
}
I have an image on a webpage. It's a pretty big image, however. It's 6144*768. In actuality, it is a series of 6 images mushed together.
I read that it's better practice to load this one image instead of loading 6 images. I've found this to be true as well, when I used tables and CSS.
However, when I set this image as the source of an image element and then set the size of the image element to 1024*768, the image is squished. Ack!
How can I get this image to be not-squished by using only Javascript? Also, how could I move the background of the image?
[example: Imagine a really long strip of paper. Then, place a small cut-out rectangle of paper over that somewhere on the strip of paper, so that you can only see the part of the strip that is inside the rectangle. This is what I want to do]
Place the image inside a container element, and set the overflow to hidden using CSS.
Leave the image as it is and it won't be squished
HTML
<div id="imgContainer">
<img src="myImage.jpg" alt="" width="6144" height="768" />
</div>
CSS
#imgContainer
{
height: 1024px;
width: 768px;
overflow: hidden;
}
Then to move the image use negative values for the CSS style margin-left.
#imgContainer img
{
margin-left: -1024px;
}
You can do this with jQuery as follows
$("#imgContainer img").css("margin-left", "-1024px")
What OP is looking for is CSS Sprites (also see A List Apart or Smashingmag).
Don't scale your image with CSS; instead, put it in a wrapper div and do something like this in your CSS:
#myImageWrapper {
height: 1024;
width: 768;
overflow: hidden;
}
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 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!