How to hide the rest of unused image - javascript

more you ask, more knowledge you get. Right ? I don't know this question is basic or not but a little make me think hard.
Look pic 1 what do i have.
pic 1: http://imgur.com/YFpfo69
When i upload an image, it will show up to the container called <img id="image"/> and the image is horizontally draggable. My problem is, how do i hide the rest of unused image ? When i dragging the image, the rest will not showing up

To fix this you can place overflow: hidden in the CSS of the parent element of the #image element.

Add the style overflow: hidden; to the parent element, like this:
<div style="overflow: hidden;">
<img src="img.png" id="image" />
</div>

Related

javascript image rollover not just on image, but on empty sides too

The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO

images change onHover jquery

I need many images to change when mouse hover on a image.Me try one but its change only one image how can i change many images on hover on image.My try fiddle
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
If I correctly understand your problem, you want an image slider when you hover on the container.
The images are in inline-block are they are set to white-space: nowrap. So, that they don't wrap. container is set to overflow: hidden, it hides the extra images.
The images are shown by animating the margin-left of the inner div. So, it is like the inner container is moving but the container stays still.
You can modify it however you like, vertical animation, using css transitions and stuff.
I cannot post the code here because of the shortened url of the images.
You can test and modify it here, it's a pen.

HTML: set max width for image within div

I have a page with several divs like the following using Bootstrap classes.
The divs and buttons adjust their width properly when the screen size changes.
However, the image does not which then causes the image to overlap the underlying div when being watched on a small screen.
Is there any way I can set a max width for the image or do something so that it never exceeds the underlying div ? I tried adding height="auto" and width="80%" to the image but that didn't work.
<div class="txtcntr well well-large span4">
<img src="images/icons/bl_Queue.png" alt="" />
<br /><br />
Check Queue
</div>
Many thanks for any help with this, Tim.
You can try to add css property max-width: 100% for the image

Fluent change of images

I make an image gallery. I have 9 fields, in each field there is an image (or better, there is a part of image). In total, I have 9 big images and in each of that fields there is a 1/9 of each big image.
When I "hover" one of these nine fields, I need to change the other fields to the rest of this image and see the whole image over all fields.
Okay, this I am able to make with CSS and a little bit of JS, but I am looking for any javascript/jQuery effect, let´s say to change image by image from right top corner to left bottom corner, any fluently change between images.
Example, with 3 images:
HTML:
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
CSS:
img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}
.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}
JavaScript:
function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}
(fiddle)
Do you have any idea how to make the fluent change of images when hover one of them?
In HTML there should be all 27 small images, it´s no problem, I´m looking for the switching effect. You can send links for examples, maybe I only don´t know how to call what I need :-)
Thanks.
Ok, I understand your question now!
You mean, when you hover over on an image, the rest of images get replaced by its remaining parts and whole of the 9 images match up to complete the image?
You need to set these functions!
Try to remove the onmouseover function from the element, and try to use jQuery for that!
Lets start the example!
The example image tag:
<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />
First you need to get the image on which the mouse over event occured, like this:
$('img').mouseover(function () {
var id = $(this).attr('id');
var class = $(this).attr('class');
if(id == 'red') {
if(class == 'image5') {
/* replace all the other images with red one
* here you will check the image's class too, which is the number
* location where it is present at!
*/
}
}
}
After this, you will need to shift the image's back too! For that, use this:
$('img').mouseleave(function () {
// shift the src tag back as
$('.image5').attr('src', 'its/src/to_file5.png');
$('.image7').attr('src', 'its/src/to_file7.png');
$('.image6').attr('src', 'its/src/to_file6.png');
}
And so on.
And yes, you will be needed to keep the images in the browser as downloaded files on the page load and just keep shifting them once the user hover's over!
In your fiddle, all you're doing is adding a classname but you are not removing or reverting it back on mouseleave event; there is no mouseleave event.
You can use the jQuery UI switchClass() method which allows you to animate whole class.
Here is a working code sample using your as basis:
function show_image(id) {
$('img').each(function() {
var className = this.className;
if (className == id)
className = '';
$(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
});
}
Since it's removing one class and add other, if the one you remove and add is the same it won't work hence the need to check and reset.
As for "linear" it's just my personal choice of easing method, choose your own from the full list.
Updated fiddle.

How to append Img to Img in html or javascript

Hello I am trying to make status bar, which I add some image after previous image.
Let me explain it clear.
I have two image(gif). Guess white 10x10px and black 10x10px.
I use this tag <Img src='./black.gif> on my homepage.
and I want to put <Img src='./white.gif> after <Img src='./black.gif>.
finally it looks something like this
■□□■■□■□■
Is it possible to do using HTML? or any good idea?
---------add
thanks. Actually I can have more images, and it isn't fixed. For example, I want to append a image corresponding with the value like 1-3(green) 4-7(yellow) 8-10(red). And the data from highcharts dynamic update.
Solution 1 (preferred):
Why can't you just use the background-repeat property and use Photoshop to create a single image with the black and the white squares? IF you can't do this, see below for another solution.
Solution 2:
You can wrap the images in a div and give them a float: left:
HTML:
<div>
<div class="image_cont">
<img src="white.jpg" />
</div>
<div class="image_cont">
<img src="white.jpg" />
</div>
</div>
CSS:
.image_cont{
float: left; /* OR display: inline-block OR width: xx px */
}
Working Example (JSFiddle)
I found it with jQuery. The solution is to use "append" and wrap img with div container.
and
$('#image_status').append('');
wrap the images with a div container and assign an id to it i.e. (id) then use this css property:
div#id img{
display: inline-block;
}
jsfiddle

Categories

Resources