When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.
If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.
It's the same image. It just enlarges it slightly.
Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.
Related
I'm working with a jquery and I have this image that is the main problem. I googled it but came up with nothing. Here is my content for example.
And when the guy(in the picture above) is being click I want it to slide to the left side and will looked like this. Please see image below.
So what I'm thinking is
1. using addClass and removeClass using jquery or
2. just use jquery .slide or toggle function?
If there's a solution as such how could it be done? Since I only know is using addClass tho. And also what I'm planning is when the image exceeds 800px then the girl(in the image) will be send to back of the guy image.
What you are trying to do is create a mask around the guy. The scope of this question is beyond masking. Most methods of masking don't have large browser support at this moment so posting more on this would be disingenuous. But worth googling otherwise you can use the transform property to move the picture to the left. But you won't get the results you are looking for..
But there is the option of masking the picture in Photoshop and saving it as a PNG. And then utilizing the translate CSS method to move the image to left. This is your best option. But the details of either of these methods are out of scope for this question.
Cut this guy from image and put in another div at needed position. Put blue box between those two images and use slide function. You can cut the guy from his head i think.
Basically you need to have an html structure like this:
<div id='container'>
<div id='couple'></div>
<div id='mask'></div>
</div>
Initially in your css:
#mask {
display: none;
}
And, of course, you have to align horizzontally this two div.
Your jquery will have a behavior like this:
$('#couple').on('click', slide);
var slide = function() {
$target = $('#container');
$mask = $('#mask');
$mask.fadeIn();
$target.animate({
left: "+=50"
}, 500, function() {
/* callback on end*/
});
}
For complete documentation of animate check api jquery.
I've been trying to create an effect where I hover over an image and the entire image goes white with text but my code isn't working, would anyone mind talking a look at letting me know what i've been doing wrong? http://jsfiddle.net/MBsbj/
<div class="frontImages"><img class="alignnone size-full wp-image-24" alt="biryani sideimage" src="http://tandoorifreshonline.com.mlseo.net/wp-content/uploads/2013/11/biryani-sideimage.png"/>
<div class="hoverText">HOVER TEXT HERE</div>
</div>
$('.frontImages').mouseenter(function(){
$('.hoverText').fadeIn();
});
.hoverText {
display:none;
}
Note - this code was based off of this thread: Show text when the cursor hovers over an image - however when I entered the code from the answer, it doesn't seem to work either. http://jsfiddle.net/nMCbY/
Thanks!
Your code works as it is you should only add an reference to jQuery in your JSFiddle to make it work. See your updated fiddles: http://jsfiddle.net/MBsbj/1/ and http://jsfiddle.net/nMCbY/1/
I've also edited the second fiddle to position the caption over the image, instead of under by adding:
caption.offset({ top: image.position().top })
See: http://jsfiddle.net/nMCbY/3/
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'm trying to create a web design and there are a bit strange forms, something like this:
when the user hover on 1 section the background should change only for it:
the same for the second and third one:
Hope I'm clear...
I have no idea what technology should I use in order to achieve this affect. Can anyone please help?
Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there
There are two ways:
use SVG to draw the shapes, with a fallback for older versions of IE.
Use background images. on normal shaped divs.
I would go with three separate images, each with the whole background and one "selected" area - on hovering a div just replace the background to the one having that div as "selected".
Quick example for the JS code:
function ReplaceBg(oDiv, num) {
oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}
function RestoreBg(oDiv) {
oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}
And the HTML:
<div style="background-image: url(images/background.png);">
<div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
<div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
<div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>
Hope the idea is clear enough..
There is a CSS3 syntax boreder-radius and you can do this with it, but you had do the work here , I mean you had set the random pixels and look for the one which suits best. For example here it is -- http://jsfiddle.net/divinemamgai/Ld7He/
OR
Maybe you should keep the main background image as white for images 1 and 3 and for image 2 use png
based background-image and change it on mouseover using Jquery and don't forget to keep the highest z-index for image 2.
Hope this helps you.
May this help http://jsfiddle.net/JeaffreyGilbert/G3VG7/
I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>