How to append Img to Img in html or javascript - 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

Related

How to hide the rest of unused image

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>

How to fit a list of images in an HTML div to form a 2D grid?

EDIT: Problem fixed. See my own answer for details. Will mark it as the answer in 2 days when SO lets me.
I am populating a div with a list of square images using Knockout. The div is currently of fixed width and height, though will eventually be resizeable. I would like the images to fill up the div row by row. So when image n reaches the boundaries of the div's width, image n+1 is wrapped around to the next row. Currently, the images flow over the boundaries of the div to fill the entire window.
The current markup is as follows:
<div data-bind="foreach: images" width="500" height="500">
<img data-bind="attr: { src: fileName }">
</div>
I've played around with float and overflow with no success so far. I've also tried putting the images in their own divs. The images exhibit the wrapping behaviour I want in the whole window to form a grid, just not in the div I've put them in.
How do I make the images stay inside the div while getting the grid that I want? Is this possible with HTML/CSS alone or does it require some Javascript?
As Daniel Weiner said in his comment - floats are the way to go. Add in display : inline-block; to keep each element aligned. Example:
#container {
width: 100%;
background-color: black;
display: inline-block;
}
.block {
height: 100px;
width: 100px;
background-color: #fff;
margin: 10px;
float: left;
}
<div id=container>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
My problem was that I was not specifying the length units for my containing div. In my original markup, I was using the HTML attribute width="500". Changing this to inline CSS and specifying the length unit solved the problem, keeping my 2D grid inside the div: style="width: 500px"
Besides this, as suggested by wahwahwah, the following style was required for a containing div for each image: float: left;
Inlining the CSS, the end result is:
<div data-bind="foreach: images" style="width: 500px">
<div style="float: left;">
<img data-bind="attr: { src: fileName }">
</div>
</div>

display an image above the content using absolute positioning

I am just wondering how to display an image above the <p/> using absolute positioning. Note: the image has no define height, it could be longer or shorter. The goal is to display the image above the using absolute positioning.
<div id="wrap">
<p>Hello</p>
</div>
<script>
//Display an image above the <p/> using absolute positioning.
//Note: the image has no define height, it could be longer or shorter. The goal is to
display the image above the <p/> using absolute positioning.
</script>
If you want an <img> above the <p>, is there a reason why you can't do the following?
<div id="wrap">
<img src="path/to/img">
<p>Hello</p>
</div>
I would highly recommend this approach as the height or width of the image will not break anything and the <p> will move according to it's size.
But let's assume the <img> is elsewhere, like below it:
<div id="wrap">
<p>Hello</p>
<img src="path/to/img">
</div>
You can add the following CSS:
img {
position: relative:
top: -25px;
}
This is not a very good thing to do, though - as it literally just moves the image up 25 pixels. What if the size of the paragraph <p> changes? What if you add more content above the paragraph <p>?
You can also try:
img {
position: fixed;
top: 0;
}
This will put the image at the top of the viewport at all time. Again, using either of the these position methods present a lot of problems (unless it's what you want) and I recommend my first suggestion using pure HTML, and avoiding CSS position fixes.
I see no smart way to do this... why not $("#wrap").before("image"); without absolute position?
If you mean in terms of hiding, there you go:
Markup
<div class="wrapper">
<p>I will be hidden soon.</p>
</div>
CSS
.wrapper img{
position:absolute;
top: 0;
}
JS
$('.wrapper').append($('<img>', { src : 'http://placehold.it/350x150'}));
See fiddle

Remove CSS of an image (CSS is part of a generated code)

I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.

Text on image on hover

</img>
I want it to have onhover a text on it like for example edit this picture.
I thought of backgroung image on css but this is not possible as I call the image from mysql and store the location in a $_SESSION as you can see.
I'd appreciate any help.
EG. http://tympanus.net/crop1.1/ if you hover over the image, a pencil will appear. Instead of pencil, I want text to appear
This can easily be done using css positioning:
(1) create a div tag to function as a container for both the image and the text. Add a p tag around your text.
(2) add position:relative to the div you just created:
#div-name {
position: relative;
}
(3) add a new style for the text that positions it relative to the div:
#div-name p {
position: absolute;
width: 168px;
left: 10px;
bottom: 10px;
background-color: #AAA;
}
You should now have a caption on your picture. I leave the styling up to you, and you may want to consider using JQuery to make your edit tag appear on hover.
Place a title="The text you want" attribute on the <img/>.
<a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture" title="Your text" /></a>
Alternatively, you could use JavaScript to have a stylized tooltip appear. If you'd prefer this route, I'd recommend jQuery and the qTip plug-in.
Couldn't you just use the title attribute?
<img ... title="Edit This Picture" />
I'm not sure I fully understand your question but perhaps this is what you are looking for.
Using the title attribute of the img tag you can have hover text
</img>

Categories

Resources