Develop Reference

How do I move this image/link in css

Im trying to move this image in css but it just wont move no mater how many times I test it, what am I doing wrong?
#yahoo1 {
position: absolute;
top: 100px;
left: 800px;
}
<p id="yahoo1">
<a href="http://www.yahoo.com">
<img border="0" alt="yahoo" src="images/yahoo.png" width="300" height="300">
</a>
</p>

#yahoo1 {
position: relative;
}
#yahoo1 a {
position: absolute;
top: 100px;
left: 800px;
}
#yahoo1 img {
display: block;
}

Iterate over images and then pause with button press using jQuery

It has been a very long time since I last looked at jQuery. I have the following markup
<div class="col-md-3">
<div id="race_track">
<%= image_tag 'race_track/track_curved.jpg', data: { engine: 'Sports'} %>
<%= image_tag 'race_track/track_hills.jpg', data: { engine: 'Hills'} %>
<%= image_tag 'race_track/track_rough.jpg', data: { engine: 'Rough'} %>
<%= image_tag 'race_track/track_straight.jpg', data: { engine: 'Straight'} %>
</div>
<p class="lead"><a class="btn btn-lg btn-info">Select</a></p>
</div>
What I am looking to achieve is have each image display one at a time and then when I click 'Select' the loop would stop on whichever image it was on at the time (though this can be random if needed).
I have had a look at the jQuery Cycle Plugin but the pause event only happens when you hover over the images and that's not what I was looking for.
I don't want to reinvent the wheel here.

From jQuery Cycle Plugin Option Reference, you can call its api to pause it like $('#slideshow').cycle('pause');
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 500
});
$('#start').on('click', function() {
// Make it roll again
$('.slideshow').cycle('resume');
});
$('#stop').on('click', function() {
// Make it pause rolling.
$('.slideshow').cycle('pause');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="slideshow" style="position: relative;">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0;">
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 0.0945702; width: 200px; height: 200px;">
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 0.904508; width: 200px; height: 200px;">
<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;">
<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;">
</div>
<button id="start">start</button>
<button id="stop">stop</button>

How to put four images 2x2 on other image as background, CSS?

I try to put 4 images (same size) on 5th image defined as BG.
This is how it looks like now:
It works fine if height is fixed but in my case the height might change and I get this behavior:
This issue is not surprises me because I use % but not px.
When width changes, the style left: 13% changes
Very important!!! I can use only "%"
How can I achieve 1st image I posted even if height changes?
Here is relevant code:
<!-- BG image -->
<div style="position: relative; right: 0; top: 0; height:100%">
<img src="img/groups/pic-shade.png" style="
position: relative;
top: 0%;
right: 0%;
height: 17.6%;
">
<!-- left-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 13%;" src="img/group_6.png">
<!-- left-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 13%;" src="img/group_6.png">
</div>
[EDIT]
I tried to put right: 0% instead left: 13% but it doesn't help me because BG div has bigger width then BG image:
Here is root DIV selected:

DEMO
Don't use position absolute -- it breaks the flow and relationship between elements which means they can not show any response to each others width height changes.
Instead use the table technique -- check the demo.
HTML
<div class="bg-image-wrapper">
<div class="table">
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
</div>
</div>
CSS
img{
display:block;
}
.table{
display: table;
}
.row{
display: table-rwo;
}
.cell{
display:table-cell;
}
.bg-image-wrapper{
display: inline-block;
background: url(http://placehold.it/200x200);
border-radius: 10px;
overflow: hidden;
}

<!-- BG image -->
<div style="background-image:url("img/groups/pic-shade.png"); position: relative; right: 0; top: 0; height:100%">
<table>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
</div>

Set image src using javascript return value

I want to set the image src by using a text returned by a JavaScript function. What is the correct way to assign JavaScript return value to src? Code below:
What I am trying to achieve here is adding a dummy random number to the end of the url in order to get rid of browser image caching.
<body><div class="slideshow" style="position: absolute;">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
</div>
<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);//-->
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
</script></body>

use jQuery. You will need to add an id attribute to your img tag but this should do it.
<img id="imgLink1" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
$().ready(function(){ $('#imgLink1').att('src', getMyLink()); });

My advices : avoid inline JS, use CSS, and use JQuery.
I would do like this :
<body>
<div class="slideshow" style="position: absolute;">
<img id="img1" src="" class="myImages" title="image">
<img id="img2" src="" class="myImages" title="image">
</div>
<script>
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
//Assign image source and display it (you have defined display:none attribute)
$('#img1').attr('src', getMyLink()).fadeIn(300);
$('#img2').attr('src', getMyLink()).fadeIn(300);
</script>
<style>
.myImages {
width : 1024px;
height : 768px;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 5;
opacity: 0;
}
</style>
</body>

Save many canvas element as image

I have 3 layers of canvas - 1 is matrix, 2 & 3 is graphics, how to preserve them in one image?
<div style="position: relative;">
<canvas id="matix" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

You can draw one canvas into another with ctx.drawImage(other_canvas,0,0)
If you do that in the right order, you will have all the canvas contents correctly layered in one of them.
If you want to save the image, you can call canvas.toDataURL() to get the contents as a base64 encoded PNG file.