Develop Reference

Debuggin short codes (If you dont mind helping me)

I am a beginner in Javascript, I am trying to make a website that can show image. the HTML is like this (main part):
//And my Javascript :
document.getElementById('category').innerHTML = row.category[count]
document.getElementById('bbox').style.left=row.x1[count]
document.getElementById('bbox').style.left=row.x1[count]
document.getElementById('bbox').style.top=row.y1[count]
document.getElementById('bbox').style.width=row.x2[count]-row.x1[count]
document.getElementById('bbox').style.height=row.y2[count]-row.y1[count]
/*I set the style in my css file, which is different file with my HTML :*/
#previewimage{
width: 500px;
/* height: 100%*/
z-index: 1;
position: absolute;
}
#bbox{
width: 100px;
z-index: 3;
position: relative;
height: 100px;
border: 5px dashed black;
left: 150px;
top:200px;
}
<div id="images">
<img src="img/80673284_74c3361ed19c018192c338d338d27d67.jpg" id="previewimage">
<img id="bbox">
</div>
Now the problem is why, if I put my javascript line on a button, it change randomly, It is like set the left, top to 0 and width and height remains constant.
Any idea ?

got it!
I just forgot to put px
LOL this is funny

Why do my images become unaligned when using an Anchor tag?

I'm new to HTML and CSS and I just can't figure this out. I've managed to align three images horizontally so they sit comfortably next to each other on the webpage. They are all sized accordingly to my needs too. However, I'm trying to use the Lightbox script with them (allows you to view the images in a pop out window) and to do that the image tag needs to be wrapped within an <a> tag to link to the Lightbox script. However, when I add the <a> tags the images become completely misaligned and disproportionate. Any suggestions?
<div class="imagecont">
<a href="images/gallery/tube1.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
<img class="imagecenter" src="images/gallery/tube1.jpg" alt="Tube 1" style="width: 50%; height: 50%;"/>
</a>
<a href="images/gallery/tube2.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
<img class="imagecenter" src="images/gallery/tube2.jpg" alt="Tube 2" style="width: 100%; height: 100%;"/>
</a>
<a href="images/gallery/tube3.jpg" data-lightbox="gallery0" data-title="24-Hour Tube concept art.">
<img class="imagecenter" src="images/gallery/tube3.jpg" alt="Tube 3" style="width: 50%; height: 50%;"/>
</a>
</div>
.imagecenter {
justify-content: center;
margin-right: 10px;
margin-left: 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: middle;
display: inline;
}
.imagecont {
width: 50%;
height: auto;
display: flex;
justify-content: center;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
margin-bottom: 40px;
}

You can also simply use CSS on the anchor tag.
img a { adjust spacing as needed }
or make it a special class for those elements.
img a.anchorimage { adjust spacing as needed }
or better yet, use a reset stylesheet to start with before doing any of your own styling.
http://cssreset.com/what-is-a-css-reset/

When you wrap the images in a tags, the a tags now become the flex-items which the images were before (i.e. the children of the .imagecont div which is the flex container), and the images become children of the a tags. So you have to apply the desired sizes, alignment etc. to the a tags and make the images relative to the a tags, for example heigth: 100%.

Overlay Panel when image mouse hover

I'm using Twitter Bootstrap and I want to implement a overlay panel when mouse hover the img tag, like in Stackoverflow when details is showed when the focus is in the image of the user.
This image illustrate:
Someone how I do this?
Thanks.

Whatever you want as the "hovering" object, just give position: absolute, then have a :hover selector, for example:
HTML
<div>
<div class="Profile">
Basic Profile
<div class="Overlay">
Put overlay stuff here.
</div>
</div>
</div>
CSS
.Profile{
position: relative;
}
.Overlay{
position: absolute;
top: 100%;
left: 0px;
opacity: 0;
height: 0;
}
.Profile:hover .Overlay{
height: auto;
opacity: 1;
}
So now, when a user hovers over the .Profile div, the .Overlay contained within it will appear, then add any additional styling for transitions and making it pretty.
Example JSFiddle

How to display pop up text on mouse hover?

I want to load some content from a DIV tag as pop up text when i hover over an image. When i mouse leave from that image pop should disappear and when i again mouse over image content should show as pop up text. I am using HTML, Jquery, JS for this. It will be very useful if i get a solution using jquery load() method. Let me know ur response.

Or, without javascript:
<div class="tooltip-wrap">
<img src="/some/image/file.jpg" alt="Some Image" />
<div class="tooltip-content">
Here is some content for the tooltip
</div>
</div>
And this CSS:
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content {
display: none;
position: absolute;
bottom: 5%;
left: 5%;
right: 5%;
background-color: #fff;
padding: .5em;
min-width: 10rem;
}
.tooltip-wrap:hover .tooltip-content {
display: block;
}

You could also try something very simple like:
<acronym title="pop-up text"><img src=...></acronym>

You can use Twitter Bootstrap with the tooltip plugin.
If you want just the plugin, you can build your own Bootstrap with the plugin only.
Finally if you want to stylize your tooltip, use CSStooltip.com.
Example :
span.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 11px;
left: -24px;
}

You can add the title attribute to the image. You don't need any extra tags or styling, just an attribute.

<p id="icon">Text to hover over</p>
<p id="info" style="display: none">Text to popup</p>
Then, finish it with javascript.
<script>
var e = document.getElementById('icon');
e.onmouseover = function() {
document.getElementById('info').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('info').style.display = 'none';
}
</script>
If you hover over the text, another will popup.

Jquery overlay when image clicked

Not the best with jquery, can someone suggest a general approach for what i am trying to achieve please? I have a grid of photos, and when they are clicked on, an opaque overlay will be animated on top of the entire picture, the overlay will contain some dynamically set text. I have the images, and the onclick handler working, just trying to figure out the best way to apply the overlay. thanks

Not very pretty semantically, but should get the job done :
Let's say your imgs are 200x200.
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>
// etc...
Then, the CSS :
.imgcontain
{
position: relative;
width: 200px;
height: 200px;
overflow: hidden; // not sure you want to makes the overlay just show or slide from top. This is useful only if it should slide.
}
.imgcontain img
{
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
z-index: 2;
}
.imgcontain p
{
position: absolute;
display: block;
width: 200px;
height: 200px;
top: 0px; // if slide from top, -200px
left: 0px;
background: rgba(0,0,0,0.5) // or a background image like a transparent png with repeat
z-index: 1;
}
.imgcontain:hover p
{
z-index: 3; // if slide from top, top: 0px
}
This is a pure CSS solution, without animation, works for users with Javascript of.
If you want then to animate it using Jquery :
$(.imgcontain p).hide().css('z-index','3'); // on ready, hide the overlay. Maybe throw the .css() in callback.
then, on click/mouseover
$(.imgcontain).click(function()
{
$(.imgcontain p).show();
});

Check this website may be that help you.
http://flowplayer.org/tools/overlay/index.html