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
Related
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.
I have a map with some locations marked with orange dots.
The map is in .jpg image format.
I placed it on my website, now I want to display another gif animated image, when someone hovers over a particular orange dot in the map image. Refer to the picture on the link below. The gif image to be displayed in every dot is different.
Help me solve this problem using HTML, CSS, JavaScript.
https://drive.google.com/file/d/0B5s1EBTl5WExcUNBTXR0aHFmYjQ/edit?usp=sharing
you can use an imagemap in combination with one or more DIVs
you show or hide and if needed change the position of your DIVs via JavaScript on mouseover
a little example
<html>
<head>
<style type="text/css">
#myOverlay{visibility:hidden; z-index:10; position:absolute; top:100px; left:100px;}
</style>
<script language="JavaScript">
function showDiv(imgUrl, x, y)
{
var myDiv = document.getElementById("myOverlay"); //get the div element
myDiv.innerHTML = "<img src='" + imgUrl + "' />" //overwrite the content
myDiv.style.top = y; //set position top
myDiv.style.left = x; //set position left
myDiv.style.visibility = "visible"; //show the div
}
function hideDiv()
{
document.getElementById("myOverlay").style.visibility = "hidden"; //hide the div
}
</script>
</head>
<body>
<img src="yourFile.jpg" usemap="#yourMapName"></img>
<map name="yourMapName">
<area shape="rect" coords="11,10,59,29" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage1.gif',59,29);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt1" title="anyTitle1">
<area shape="rect" coords="110,100,159,129" href = '#' onMouseOver="JavaScript:showDiv('yourOverlayImage2.gif',159,129);" onMouseOut="JavaScript:hideDiv()"alt="anyAlt2" title="anyTitle2">
</map>
<div name="myOverlay" id="myOverlay"></div>
</body>
</html>
or
you can draw your image as svg (http://www.w3.org/2000/svg) - i would not recommend that cause it's a lot of work
You can use iframe to show a image:
<iframe frameborder="0" scrolling="no" width="25" height="25" src="image1.gif" name="imgbox" id="imgbox">
And make a dot a link which will load new picture in iframe:
dot
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);
});
};
What im looking to achieve is to modify the margin-left css property of a div when someone slides their finger across the div on an ipad.
To explain what i'm trying to do, I have setup this page:
http://littleirrepressiblewonton.com/wp7/category/all/
Now when someone clicks on a thumbnail image, it loads a horizontal slideshow of large images. Some of the images are too wide to fit on the ipad and they wish to use touch to drag this horizontal slideshow of images left or right.
The way the divs are setup are as follows:
<div class='WontonGalleryFullsMask'>
<div class='WontonGalleryFulls' data-animating='no'>
<div class="WontonGalleryFullImage" data-idx="0" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster022/2835976114.jpg" alt="VP_test_poster022" /></div>
<div class="WontonGalleryFullImage" data-idx="1" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster021/663128145.jpg" alt="VP_test_poster021" /></div>
<div class="WontonGalleryFullImage" data-idx="2" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster020/3945564367.jpg" alt="VP_test_poster020" /></div>
</div>
</div>
The div.WontonGalleryFullsMask has the following css and is setup as a mask.
height: 523px;
overflow: hidden;
width: 100%;
and then the margin-left property of the div.WontonGalleryFulls div is modified to move the gallery left and right.
So if someone slides 300px on the ipad, I need to modify the margin-left css property of the div.WontonGalleryFulls
I'm looking for a jquery solution as the site is already using it.
i ended up modifying a script from http://popdevelop.com/2010/08/touching-the-web/
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var ml = parseInt($(this).css('margin-left'));
offset = {
x: orig.changedTouches[0].pageX - ml //pos.left
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
'margin-left': orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$('div.WontonGalleryFulls').css('position', 'absolute');
$('div.WontonGalleryFulls').draggable();
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