For a little private project I've a map that consists of multiple images, put over each other, each one with a different transparent part, so all of them together form the map. All images have the same size and start at 0,0 (to make it easy to align).
Now it would be nice to have popups for the different parts, but obviously only the top-most image get's all the mouse hovers...
<p style="position:relative">
<img id="de_background" src="background.gif" style="position:absolute;left:0px;right:0px"/>
<img id="de_10" src="1.gif" style="position:absolute;left:0px;right:0px" title="Title 1"/>
<img id="de_12" src="2.gif" style="position:absolute;left:0px;right:0px" title="Title 2"/>
So, is there a clever trick to allow hover/popus also for the part of the image that isn't transparent? Can I somehow ask via JavaScript "Which of the images here is not transparent on this point?".
You set transparent in CSS properties or gif images are transparet yet? and by the way, you don't wrote elements z-index
Just use the display CSS property for all elements that you want to hide, apart from the first one. You can even apply the CSS property through JS and toggle between hidden and the visible one.
.hiddenImg {
display: none;
}
More info: http://www.w3schools.com/css/css_display_visibility.asp
Related
In my website, images are loaded from top to bottom, how can I change it so the images will load in Pixelation, like on Google Maps when are you zooming in?
Or if you want a pixelating/rendering blur, you could look here: https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/
Here is what is going on:
Render a div where the image will be displayed. Medium uses a with a padding-bottom set to a percentage, which corresponds to the aspect ratio of the image. Thus, they prevent reflows while the images are loaded since everything is rendered in its final position. This has also been referred to as intrinsic placeholders.
Load a tiny version of the image. At the moment, they seem to be requesting small JPEG thumbnails with a very low quality (e.g. 20%). The markup for this small image is returned in the initial HTML as an , so the browser starts fetching them right away.
Once the image is loaded, it is drawn in a . Then, the image data is taken and passed through a custom blur() function You can see it, a bit scrambled, in the main-base.bundle JS file. This function is similar, though not identical, to StackBlur‘s blur function. At the same time, the main image is requested.
Once the main image is loaded, it is shown and the canvas is hidden.
All the transitions are quite smooth, thanks to the CSS animations applied.
An example fromo the page:
<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
<img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
<img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
<noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"></noscript>
</div>
</div>
</figure>
Or you could check out this CodePen That JMPerez set up, in an atempt to recreate the effect himself.
I'm sorry about my first answer if its not what you were looking for.
I have a banner, and it's a certain size. It has decorations on it.
I also have my whole website style sheet based on percentages on the page. I want to keep it this way.
However, is there a way to dynamically resize my banner image? So if I shrink the webpage down, it does not omit any part of the banner?
Hi is very simple without jquery you can do this only css
i give you code
css part
.imgresize{
width:50%;
}
.imgtag{
width:100%;
}
html part
<div class="imgresize">
<img src="https://www.google.pt/images/srpr/logo3w.png" alt="google" class="imgtag" />
</div>
and live demo now click here
http://jsfiddle.net/rohitazad/aJdmu/1/
Your question is kind of blurry, but to resize properly an image you can play on the width or the height value (or both) of an
<img width="width_value" src="img_src" />
tag for example. The browser will keep the proportions of the image if you only change one attribute. Changing these values using Javascript is easy and this should not alter your layout.
I've got 2 images one large and one small. The large one is 77 X 15 and the small one is 15 X 15.
Now these 2 images sit on top of another image (which can vary in size). What is supposed to happen is; when the user hovers over the small image, it is hidden and the large image is then displayed. Both images are wrapped in a DIV. I know that I can do this in a function (and I've got it working) but I need to try and keep it inline (criminal I know). Here's the code I've got so far. Bear in mind I was passed on this code.
<div id="small" style="position:absolute;top:0px;right:15px; z-index:5000;" onmouseover="this.style.visibility='hidden';" onmouseout="this.style.visibility='visible';">
<img src="small.gif" style="FILTER:Alpha(Opacity=50, FinishOpacity=50, style=0); position:absolute; width: 15px; height: 15px;" border="0" alt="text">
</div>
<div id="large" style="position:absolute;top:0px;right:77px; z-index:5000;" onmouseover="this.style.visibility='visible';" onmouseout="this.style.visibility='hidden';"><img src="large.gif" style="position:absolute" border="0" alt="text">
</div>
What seems to happen is that when I hover over the larger image it disappears and then the small one just keeps flashing when you hover over it. Any ideas?
EDIT:Forgot to mention that both images are different, so I can't just resize one image.
I may be approaching this completely wrong so please let me know.
Thanks
i dont think it is a very gud approach, consider using just a simple jquery animation on a single div with single image . on mouseOver increase the height or whatever and on mouseout reduce it back again !!
I don't understand why the background color is not being applied as expected here. This might be a lack of understanding on my part as to the relationships between elements in CSS?
The page in question: http://www.preview.imageworkshop.com/portfolio/
Replicating the issue
First, open the above link in IE 7 or IE 8
Click the PRODUCT filter, then press the PROMO & EDITORIAL filter
White dots will have appeared on some of the images (this is a bug in IE which causes some pixels to be left transparent after a fade animation. if you don't see them, do a little more filtering, they turn up fairly quickly.
CSS BACKGROUND COLOR PROBLEM
What works:
If I set the background color for the gallery background to be red, then this red color shows throught the transparent spots on the images. (The inference here, is that a background color of black hides the 'white spots' bug).
#isotopegallery{background:red;}
What doesn't work:
Obviously, I don't want to set the gallery background color to be anything but white.
What I want to do is set the background color of the DIV that contains the images, for example:
.photo{background:red;}
however, when i do this, the red background color does not show up through the transparent pixels??
The simplified overview of the structure of the elements is as follows
<div id="isotopegallery" class="photos">
<div id="ngg-gallery-18-71">
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
</div>
</div>
HELP!
I can't figure out why this background color works for the #isotopegallery parent DIV, but not for the .photo DIV?
When i look in firebug, the color property is set for the .photo div, but does not show through the transparent pixels?
This is the last issue that his holding up go live for our website, and it is driving me nuts!
I would really appreciate any help that you can provide to help me resolve this issue.
NOTE: there is info around that suggests that changing the blackpoint of the images in photoshop will fix this problem. We have tried this method, and have found it does not work.
Are you floating the interior elements of .photo without clearing them? That would prevent the background color from covering the height of the element in question.
If that's the case, appending something like <br style='clear: both;' /> to the .photo div should do the trick.
Likewise, you could always try applying the background color to the img elements themselves: .photo img { background-color: red;}
The creator of isotope has been helping me look at this issue, and has added the following comment:
"Did some more testing. I've come to the conclusion IE treats the
entire element, which contains the image, as one 'image'. Whatever is
visible gets flattened. If that element has a true-black pixel within
an image, than that pixel of the element will be treated as
transparent, regardless of what's actually behind the image.
Take a look at: http://support.metafizzy.co/2011/09-06-ie-trans.html
You'll see a couple transparent pixels pop up, even though the
background of each item is clearly red (items have padding, background
is red). I then dynamically changed their color to blue and the pixel
is still transparent.
Which means the only pure-CSS solution is to set the container
background to black"
Not sure where to go from here. We have tried moving the black point (as this is supposed to be caused by true black pixels), but have found this to be an unsucessful method.
I found a solution to this issue. I have posted full details against this thread (link below), which describes the issue in more detail.
IE fade causing white spots on images
I realize that this is probably an "old school" way of doing this, but I finally got my gallery to work with one exception. If the gallery is located lower on the page, the "#" link on the thumbnails causes the page to jump the top. Is there a better way to create this gallery?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
Thanks in advance!
Adding a return false will usually stop the page from jumping to the top when clicking on a # link.
<img src="..." />
For your problem, I would go with Shawn's solution and just use CSS. So delete all of the links around the images and add this to your document:
<style> img{cursor:pointer;} #Display{cursor:auto;} </style>
The second entry (#Display) is to make sure your main image does not get the pointer cursor. It would be better to just drop a class on each of your images and then assign the cursor to images with that class. That would look like so:
<style> img.myImage{cursor:pointer;} </style>
<img class="myImage" src="...">
I'm guessing you're using the anchor tag in order to get the hand icon on hover. You could get the same effect by using CSS.
style="cursor: hand;"
This should create the same effect and avoid the problem of the anchor tag.
I strongly suggest you to don't use an anchor tag for that. JavaScript events can be added to any DOM element, just like in:
<li class="click-to-expand">
<img src="..." />
</li>
And also, as some users already replied, you can use CSS pointer property to indicate a possible user interaction when hovering the clickable interface item.
.click-to-expand{
cursor:pointer;
}
Remember to keep it accessible by providing a valid URL to access the content in case it's necessary (no javascript fallback).