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>
Related
I'm designing an avatar module. The point is that when clicking on the hair or the eyes, they have to move at the top of the head. Instead of getting that, they do not move at all but the code also does not alert from an error.
Here's the HTMLcode:
<style>
#cabeza{
position: absolute;
z-index: auto;
left:225px;
top:125px;
}
#ojos {
position: absolute;
z-index: 1;
left: 8px;
top: 300px;
}
#pelo {
position: absolute;
z-index: 2;
left: 0;
top: 125px;
}
</style>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="cabeza"><img src="assets/img/cabeza.png"/></div>
<div id="pelo"><img src="assets/img/pelo.png" /></div>
<div id="ojos"><img src="assets/img/ojos.png" /></div>
</div>
</div>
<script>
alert('NOSeSiFunciona');
document.getElementById("pelo").onclick = function() {document.getElementById("pelo").style.left = "225px";};
document.getElementById("ojos").onclick = function() {document.getElementById("ojos").style.left = "235px"; document.getElementById("ojos").style.top = "200px";};
</script>
</body>
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;
}
In my HTML website I have a button, and I try add an transparent image over this button. And I can't click in this button after.
My problem is something like this:
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Thanks very much for your help!
To fix this you can set the z-index of the image lower than the a element (which defaults to 0)
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
<a href="#">
Click here
</a>
</div>
Alternatively you could use the image as a background on the container and avoid the need to position it absolutely, or have to change z-index at all.
you need to add a z-index to the button and give it position relative
.button {
z-index: 1;
position: relative;
}
Here is the code you need to use
html
<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
Click here
</a>
css
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
.button {
z-index: 10;
position: relative;
}
See js fiddle here
You can alter width and height of image-container as you wish..
#container {
height: 400px;
width: 400px;
position: relative;
}
#image-container{
width:100%;
height:100%;
background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
background-position:center;
background-size:contain;
}
<div id="container">
<div id="image-container">
<a href="#">
Click here
</a>
</div>
</div>
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>
I'm trying to create a sliding image gallery where every interval they will slide along and the first image will fade out and the new image will fade in. The fading in and out is working and my images are set as 'position: absolute', but they won't slide. I set up a jsfiddle so you can see what's happening:
http://jsfiddle.net/9awwF/
The HTML code:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="position: relative; left: 0px; top: 0px;">
<p id="discoImg1a"><a href="includes/images/discoImg1.png">
<img src="http://edubuzz.org/lawprimaryp6/files/2011/11/250px-Disco_ball41.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 0px; z-index: 1"/></a></p>
<p id="discoImg2a"><a href="includes/images/discoImg2.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 250px; z-index: 1"/></a></p>
<p id="discoImg3a"><a href="includes/images/discoImg3.png">
<img src="http://fivestaralaska.com/wp-content/uploads/2012/04/disco1.jpeg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 500px; z-index: 1"/></a></p>
<p id="discoImg4a"><a href="includes/images/discoImg4.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 750px; z-index: 1"/></a></p>
<p id="discoImg5a"><a href="includes/images/discoImg5.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1000px; z-index: 1"/></a></p>
<p id="discoImg6a"><a href="includes/images/discoImg6.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/party.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1250px; z-index: 1"/></a></p>
<p id="discoImg7a"><a href="includes/images/discoImg7.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/karaoke.gif" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1500px; z-index: 1"/></a></p>
<p id="discoImg8a"><a href="includes/images/discoImg8.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/discolights.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1750px; z-index: 1"/></a></p>
<p id="discoImg9a"><a href="includes/images/discoImg9.png">
<img src="http://www.armagh.co.uk/wp-content/uploads/2013/09/Trad-Disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 2000px; z-index: 1"/></a></p>
</div>
</body>
The script:
$(document).ready(function () {
$("#discoImg6a").hide();
$("#discoImg7a").hide();
$("#discoImg8a").hide();
$("#discoImg9a").hide();
var currentFirstSlide = 1;
var maxSlides = 9;
function updateSlides() {
// Fade out the first image shown
$("#discoImg" + currentFirstSlide + "a").fadeOut(3000);
// Go through every image and move them to the left by 250px
for (var x = 1; x < 10; x++) {
var left = $("#discoImg" + x + "a").position().left;
$("#discoImg" + x + "a").animate({ left: left - 250 + 'px' });
}
// Calculate which slide the new one will be and fade it in
var newSlide = currentFirstSlide + 5;
if (newSlide > maxSlides) { newSlide = 1; }
$("#discoImg" + newSlide + "a").fadeIn(3000);
// Increment the current first slide ready for the next update
currentFirstSlide++;
if (currentFirstSlide > maxSlides) { currentFirstSlide = 1; }
}
// Move the slides every 3.5s
setInterval(function () { updateSlides() }, 3500);
});
Thank you in advance for any help!
You're animating the left property of the p element, but it has a default position of static, so this doesn't do anything. You should either animate left on the img element or give absolute or relative positioning to the p element.
The problem is that the p element has the id, not the img
<p><a href="includes/images/discoImg1.png">
<img id="discoImg1a" src="..." style="position: absolute; ..."/></a></p>
There is no effect with property left without position absolute or fixed.
On your css try giving that absolute positions a left: 0px; may be it's going to slide automatically, and don't forget to give it a relative container.