I am making a Wordpress website and some the buttons have a background image, and the image changes on hover. This is done through just simple CSS. When the user first goes to the page and hovers over a button, the space goes blank until the new image loads.
What is the best way to load all the images so it has a smooth transition.
P.S There is only max 2 buttons per page
Make a div with an id of preload that contains all the images you want to have show up when the user hovers over the buttons and put it anywhere in your html (it doesn't matter where)
ex:
<div id="preload">
<img src="path/image-01.png" width="1" height="1" alt="Image 01" />
<img src="path/image-02.png" width="1" height="1" alt="Image 02" />
<img src="path/image-03.png" width="1" height="1" alt="Image 03" />
</div>
Then in your CSS, add:
#preload {display: none}
this will hide your images, but they will be loaded. Just make sure that your buttons use the same path as the ones that the preload div do, or else you will be loading images twice.
Full tutorial here:
http://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/
You can use "Sprite" images for your buttons.
Thus all button, normal bg and hover bg will remain in an image.
And that image will load initially with the button normal state.
For hover, you have to use same sprite image, but different background-position in css.
Related
i replaced iframe elements on a dynamic content page by amp-iframes. Please have a look at following structure. I dont know the size of the iframe, because layout is responsive and content is not static:
<amp-iframe width=300 height=200
layout="responsive"
sandbox="allow-scripts allow-same-origin"
class="unknown-size">
<amp-img class="unknown-size" width="300" height="200" layout="responsive"
src="/images/logo.png" placeholder>
</amp-iframe>
The AMP-Iframe is responsive, its working fine. But i have problems with the iframe child elements (like a embeded video). There is a ugly gray distance to bottom, because the child element (iframe) is not fully stretched.
I am not able to remove the redundant gray space below my embed video. Can anyone help me, please?
I solved it. With the iframe I included the JW Player, which have a aspect ratio from 16:9.
I add those values to height and width attributes in my amp-iframe, now its working perfectly
<amp-iframe width=16 height=9
layout="responsive"
sandbox="allow-scripts allow-same-origin">
<amp-img class="unknown-size" width="300" height="200" layout="responsive" src="/images/logo.png" placeholder>
</amp-iframe>
Specifically on this page on an iPhone you can't scroll while on top of the picture. I have been trying to figure it out for hours and I'm praying someone here may have some experience.
http://epiqvapor.com/product/cosmic-fog-milk-honey/
Hi there instead of using an img tag. Use a div and add a background image to it rather.
Instead of
<img width="100" height="100" src="example.jpg"/>
use
<div style="background-image: url('example.jp'); width:100px; height:100px;"></div>
This should solve your problem for mobile :)
I'm trying to design an interaction that uses an SVG canvas (the full app uses d3) and image elements drawn on the canvas. I'd like each image to change somehow when the user hovers or clicks on the image, to show that it is selected. The most basic style change I could think of is changing the outline of the image (i.e. draw a border around it), and this works fine on Chrome 23/Chromium 20. However it does not have any effect on Firefox 16.
jsFiddle: http://jsfiddle.net/RSLsy/
Code:
<!DOCTYPE HTML>
<html>
<body>
<style>
.map {
background-color: blue;
}
.button:hover {
outline: solid medium black;
}
</style>
<div>
<svg width="400" height="300" class="map">
<image class="button" xlink:href="http://www.gstatic.com/ui/v1/button/search-white.png"
x="10" y="10" width="20" height="20"/>
</svg>
</div>
</body>
</html>
Any ideas for how I can achieve this type of effect cross-browser?
Thanks in advance!
If you aren't limited to using png images and could potentially have icon shape images like the magnifying glass as svg paths, you can use JQuery to animate their fill, stroke, etc. Here is a fiddle I made for another SO question regarding animating color change on hover that you might be able to repurpose.
http://jsfiddle.net/webchemist/hBHBn/
in your case you would want to change the JQuery UI Color plugin hook to
jQuery.Color.hook('stroke');
to get an outline effect. That fiddle should work in IE9 and all current versions of Firefox, Opera, Chrome and Safari
Edit
I updated your fiddle to get the same effect in chrome & firefox w css (havent tested other browsers) by wrapping the image element in a group with an empty rectangle the same size and location of the image. Not sure why it wont make the group element the size of the image element without the rect element holding it open.. Adding duplicate empty rectangles for each of your image elements is probably not ideal but might be easier than making svg paths for my original fiddle solution
http://jsfiddle.net/RSLsy/2/
I modified a code I found online for spoilers to:
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';" class="link">
<img src="{link1}" alt="Stats">
</a>
<span id="spoiler_id" style="display: none;position:absolute;top:5px;left:5px;">
<a onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';" class="link">
Hide
</a>
<br />
<iframe src="{link2}" width="600" height="175" frameborder="0"></iframe>
</span>
What this should do: Display a picture with alt code "Stats" on page load. When the picture is clicked, the picture will disappear and a span with Hide {iFrame} should appear hovering 5 pixels from the left and 5 pixels from the top.
This works correctly when left by itself. However, I want to put it online through a source that breaks this code (the picture will show up, but it will not change when clicked.) If I iFrame the element, then it works, except the span stays inside the iFrame. What I want to know is if there is a way to break the span out of the iFrame. The other option would be to break the iframe in that code out of the iframe it is in.
Thank you for any help you can provide. Note: I do realize that there is an incredibly high chance this is impossible. If so, a confirmation of that is much appreciated.
Edit: Turns out the place I want to put it on does not support Javascript.
The iframe acts as a nested browser window. You aren't able to position elements outside an iframe just like you aren't able to position them outside your browser.
You could try to hide the span inside the iframe and build a new span in the parent window with the same contents.
I am displaying an image when a button is clicked. How can I set my CSS for the Image to make the image center of the page and rest of the page faded and not clickable. I want to display only the image and the rest of the pages should be faded. how can I do this with CSS
<img runat="server" id="aajaxLoader" style="background-color: White; z-index:auto; width: 200px;"
src="styles/images/UploadImage1.gif" />
You have to look to javascript not ASP.Net check this Lightbox2, I think this will do the job