I am currently working on my school project website and I am really having a hard time coding.
So in my website I made an image slider and I wanted the images to be linked to another page, like if the user clicked the image they will be redirected to another page that contains information regarding the image they clicked. I also wanted a hover text when the mouse is pointed on the image that shows the title of it.
I tried to search and to watch videos on how to link images but nothing works.
Here's my code:
<script type="text/javascript">
<!-->
var image1=new Image()
image1.src="e.jpg"
var image2=new Image()
image2.src="g.jpg"
var image3=new Image()
image3.src="h.jpg"
//-->
</script>
<style type="text/css">
#gallery {
width: 100%;
height: 100%;
}
#gallery img {
width: 55%;
}
</style>
<DOCTYPE!html>
<html>
<body>
<center>
<div id="gallery">
<img src="e.jpg" name="slide" alt="Track race">
<script type="text/javascript">
<!--
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</div>
</center>
</body>
</html>
onclick on a image to navigate to another page using Javascript
3rd best answer:
I'd set up your HTML like so:
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Then use the following code:
<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
window.location.href = this.id + '.html';
};
}
That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of #JanPöschko's jQuery answer.
Related
How can I make the bigger KNIGHT-IMAGE responsive like the other images?
I have this site: http://stephaniie.com/_testlab/beta1/
Full html code: http://pastebin.com/u4HpxcB2
If you scroll down, on the right, there is Knight next to a Tower.
If you move your mouse from his right side.. an bigger KNIGHT-IMAGE appears. "Talking" starts and text + animation of the little pixel knight.
If you move the mouse away the bigger KNIGHT-IMAGE disappear he says "Goodbye" and animation + text stops.
This is made by some pretty easy coding.
For the bigger KNIGHT-IMAGE to appear/hide this CSS and JavaScript is used:
Original Source: http://clba.nl/sitepoint/img-hover-demo-js1.htm
<style>
#img2{
position: absolute;
top: 1600px;
left: 100px;
display: none;
width: auto;
height: auto;
}
</style>
<script>
var img1 = document.getElementById("sol"),
img2 = document.getElementById("img2");
img1.onmouseover = function() {
img2.style.display = "block";
if (document.images) document.getElementById('img_id12').src = 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire');
}
img1.onmouseout = function() {
img2.style.display = "none";
if (document.images) document.getElementById('img_id12').src = 'assets/images/no-text/day/12.gif'; StopSound('solaire'); PlaySound('solaire-stop');
}
</script>
For the music to start playing a PlaySound/StopSound JavaScript is used.
Original Source: Javascript play sound on hover. stop and reset on hoveroff
<script>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
</script>
How can I make the bigger KNIGHT-IMAGE responsive like the other images? If you re-size the screen you notice all images changes size, all but the bigger KNIGHT-IMAGE - which appear when you hover the smaller knight located right next to the tower. Otherwise, the scripts work perfectly.
Mouseover = bigger Knight-Image appear, Animation/Text appear on Knight, Sound start.
Mouseout = bigger Knight-Image hides, Animation/Text disappear from Knight, Sound stops, Goodbye sound start.
For HTML on the website I use <map> and <area> to make an Image map.
Code is:
<img src="assets/images/no-text/day/12.gif" usemap="#map12" id="img_id12"/>
<map name="map12" id="img_id12">
<area class="youtube" id="sol" href="https://www.youtube.com/embed/skV-q5KjrUA" coords="3890,23,3970,100" shape="rect" style="outline:none;" />
</map>
The only thing I want is too make the bigger KNIGHT-IMAGE have responsive size.
Edit and more information
I'm also using two JavaScript tools called Colorbox and Responsive Image Map:
Colorbox is a a jQuery lightbox script. Source: http://www.jacklmoore.com/colorbox/
Responsive Image Map allows image maps to be resized with screen-size. Source: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
The code to use them on Index page is this.
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".youtube").colorbox({iframe:true, innerWidth:1024, innerHeight:576});
});
/script>
Full code for Responsive Image Map script and Colorbox is found here.
Responsive Image Map script:
<script src="assets/js/jquery.rwdImageMaps.min.js"></script>
Link: http://pastebin.com/699T5kLY
Colorbox:
<link rel="stylesheet" href="assets/colorbox-assets/colorbox.css" /> <!-- COLORBOX -->
Link: http://pastebin.com/Jj4SQEhu
<script src="assets/colorbox-assets/jquery.colorbox.js"></script>
Link: http://pastebin.com/bErhvPFA
I am working on a website that the background image will fade from one to another, I have it setup and working about 98%. There is just one little problem. When it first loads and does it's first fade it fades to white and then to the image, instead of fading straight into the next image. After that it work beautifully. This is using jQuery 1.9 and I have jQuery noConflict on since the previous developer coded the sites menu using MooTools.
<html>
<head>
<script src="js/jquery.js">
</script>
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$snext.fadeIn(1500).addClass('active');
$sactive.fadeOut(2000, function(){
});
$sactive.removeClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
</head>
<style>
#myGallery{
position:relative;
width:100%; /* Set your image width */
height:auto; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
width: 100%;
left:0;
}
#myGallery img.active{
display:block;
}
.home-page-rotator{
position:absolute;
width:100%;
z-index:-10;
}
</style>
<body>
<div class="home-page-rotator" id="myGallery">
<img src="images/1.jpg" class="active" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
</body>
</html>
I took out all the content so you can test if you wanted but the is everything that runs the background rotation and fade. Also I have the CSS in a seperate file but for posting to here I just put it inline so you can see the CSS behind the code. Let me know what I should do to fix this?
Moving the remove class method to the function call of the fadeout seems to work better for me (at least in Chrome):
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$sactive.fadeOut(2000, function(){
$sactive.removeClass('active');
});
$snext.fadeIn(1500).addClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
I ran into this problem a while back and I found the easiest solution was to switch from img elements to using two divs and the background-image css url to display your images. I made a simple slider for that a while back. You're welcome to copy whatever you need from it.
Background slider source
In essence, if you have two divs that are absolutely positioned as the background elements, you can cycle their z-indexes and fade them in and out. Furthermore, you can load the next image in a constructed img element and once it has loaded, change the background-image of the hidden div and fade to it. This means that there is no loading shown and you can fade directly into the slideshow.
Here's some pseudo code below, but it would probably be easier to just look at the real functions in the source.
base.next_slide = function () {
"current slide" = "next slide";
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css({'background-image':'url("' + "Next image url" + '")',
"z-index":"-2"});
base.containers[the_next_container].css("z-index","-1");
$(this).show();
the_shown_container = the_next_container;
});
};
Plugin.prototype.init = function (base) {
$('<img/>').attr('src', "Next image url").load(function() {
base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')');
if ("there's only one image in the slider"){
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css("z-index","-2");
base.containers[the_next_container].css("z-index","-1");
});
return;
}
base.next_slide();
setInterval(base.next_slide ,base.o.interval);
});
};
I wrote a script which changes the source of an image upon mouse over the image,
at first it worked, but after adding a second image which uses the same code both stopped working.
The issue I am experiencing is that the image does not change on mouse over as it should. It looks as if the image is not found – however I am really sure the images' sources point to the right path.
I have asked for other opinions as well and I cannot see what I am doing wrong. I would really appreciate your help or any input on this.
Below is the code I am using.
<html>
<head>
<script type="text/javascript">
var images= new Array();
images[0] = "Benjamin/Untitled-3.png";
images[1] = "Benjamin/Untitled-4.png";
images[2] = "Benjamin/Update.png";
images[3] = "Benjamin/Update2.png";
function Change()
{
document.getElementById("image").src = images[1];
}
function GoBack()
{
document.getElementById("image").src = images[0];
}
function GobackAgain()
{
document.GetElementById("Update").src = images[2];
}
function ChangeAgain()
{
document.getElementById("Update").src = images[3];
}
</script>
<style type="text/css">
body
{
background-color:#1c1a1a;
}
</style>
<div align="center">
<img src="Untitled-2.png" width="325" height="191">
</div>
</head>
<body>
<img onmouseover="Change()"
onmouseout="GoBack()"
id="image"
STYLE="position:absolute; TOP:35%; LEFT:10%; WIDTH:204px; HEIGHT:278px"
src="Untitled-3.png">
<img onmouseover="ChangeAgain()"
onmouseout="GoBackAgain()"
id="Update"
STYLE="position:absolute; TOP:35%; LEFT:50%; WIDTH:204px; HEIGHT:278px"
src="Update.png">
</body>
</html>
Rename GobackAgain to GoBackAgain and replace GetElementById with getElementById.
Here is one problems:
function GobackAgain()
{
document.GetElementById("Update").src = images[2];
}
You have GetElementById when it should be getElementById
I've been looking around much today and spend a few hours trying to get something done. For a client I am creating a slideshow with a lightbox when clicked on an image. The slideshow and lightbox both work, but I don't get the right image in the lightbox yet.
This is the code that loads the slideshow and when clicked on an image opens the lightbox.
(The images for the slideshow get loaded by a php script and turned into a Javascript array)
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>
I now try to create a variable named "image"and let this contain the src of the current image in the slideshow. So I can load this to the image in the lightbox.
Hopefully some one can give me some usefull tips. I am pretty new in the Javascript language.
The script for the slideshow came from: http://www.javascriptkit.com/javatutors/externalphp2.shtml
Regards Koen.
These days there really is no excuse for using obtrusive Javascript (Stuff inside your HTML attributes, ideally it should be in an external file. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).
I have done you the favour of cleaning up your code a bit, and changed it where you seemed to be going wrong. As DotNetter has already pointed out it would be sensible to use jQuery in this instance, as it really does simplify things. However, I'm going to assume that for some reason you want it in plain js. Below is a simplification of the code that you posted with the correct change.
<style type="text/css">
.wrapper {
width: 170px;
height: 160px;
}
</style>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
document.getElementById("slideshow").onclick = function () {
var imageSrc = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", imageSrc);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
}
</script>
<div class='wrapper'>
<img id="slideshow" src="" />
<div id="light" class="white_content">
<img id="lightImg" src="" />
</div>
</div>
Before, you were getting the src of the current image when the page loaded, you need to be getting the src of the image when the user clicks on the
I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!
Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/
Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}