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.
Related
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
Please take a look at this fiddle.
My goal is to have a button to remotely slide up the image via a button, but instead it becomes small .
Anyone know the cause of this?
The image element is trying to keep its aspect ratio, since you only specified a height and not a width.
Adding width="200px" solves your problem. You will find an updated fiddle here.
You need to put the image inside a container with overflow: hidden set to it, so that the browser doesn't resize the image itself and cause the distortion of the aspect ratio.
HTML
<div class="le_map_container"> <!-- overflow: hidden on this element -->
<img src="http://bethhaim.spin-demo.com/wp-content/files_flutter/1330095469Untitled-5.jpg" height="200" class="le_map"/>
</div>
jQuery
$('.tour_map').click(function() {
$(".le_map_container").slideToggle();
});
Example fiddle
The slideToggle method changes the height of the element. But I think because you slideToggle the image tag directly, the width is changed along with the height to keep the ratio.
Try setting explicitly a width you your image to the width stays.
DEMO
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV
I've got an image on the page (class='image') within the div (class='galleria_wrapper') and want to place a caption (class='caption') at the lower right corner under that image.
The image could be vertical or horizontal, and making a fixed padding-right value let's say
.caption<{float:right;padding-top:5px;padding-right:90px;}
is not working for one or another. I need to switch on the fly padding-right value depending on horizontal or vertical image is currently on the page. I can theoretically access image's width through document.getElementByName('image').width although don't understand where to put that code. So, I probably need something like that:
document.getElementByClass('caption').padding-right =
(document.getElementByName('galleria_wrapper').width -
document.getElementByName('image').width)/2
Where do I put this code?
I do have that in my css file:
.caption{float:right;padding-top:5px;}
which places the caption below the image, but to far to the right (div 'galleria_wrapper' is wider than most of the images supposed to be displayed within that area).
I have an img tag in the html:
<img src=image title='this is caption' /></li>
...and some JavaScript which makes title displayed styled by the "caption" css definition.
How do I assign variable value for the padding-right without in-advance knowledge of particular image's width?
It is not clear why you are trying to do whatever you are trying to do with the caption. Does galleria_wrapper have only one image in it? It sounds like you have a fixed width galleria_wrapper and you want the caption at the bottom right of the photo wherever it is. If so, I'd wrap the image and caption inside another div, center that div within the galleria_wrapper, and text-align right the caption.
Put that code inline with the .caption element.
<div class="caption" style="padding-right: XXpx;">caption text</div>
Your question is not really clear and there is a better solution, but your full markup/demo page would be needed.
UPDATE
Just add the span to the galleria_wrapper div and then set text align right.
<div class="galleria_container">
<div class="galleria_wrapper">
<div style="text-align: right;">
<img id="image" src="strangers/010.jpg" class="replaced" onload="resizeToMax(this.id)" style="cursor: pointer;">
<span class="caption">Moscow Region, late 1980-s</span>
</div>
</div>
</div>
To access programatically to the padding-right, the object property is
object.style.paddingRight.
Often, the true size of an object is in px.
So when you get its width prpoerty remove the 'px' at the end of the string before doing a parseInt or parseFloat on it.
So your function becomes:
var objs = document.getElementsByClass('caption'); //Is it one of your functions?
for(var index =0;index<objs.length;index++){
objs[index].style.paddingRight =
( parseInt(document.getElementByName('galleria_wrapper').offsetWidth) -
parseInt(document.getElementById('image').offsetWidth )/2))+"px";
}
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.