Sorry but I am starting with this and I would need to add some code that the mouse movement follow these gif files, for it, Could anybody help me?
<html>
<head>
</head>
<body>
<img style="position:relative; TOP:400px; LEFT:600px; WIDTH:150px;
HEIGHT:120px; margin-right:-50px" border="0" src="trail6.gif">
<img style="position:relative; TOP:330px; LEFT:465px; WIDTH:70px;
HEIGHT:70px; margin-right:-50px" border="0" src="trail4.gif">
<img style="position:relative; TOP:340px; LEFT:600px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail2.gif">
<img style="position:relative; TOP:450px; LEFT:400px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail3.gif">
<img style="position:relative; TOP:450px; LEFT:550px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail5.gif">
</body>
</html>
Could anybody help me?
thanks in advance
Alejandro Castan
Use the MouseOver function of JavaScript.
Ready-to-use examples are to be found on the W3 site.
http://www.w3schools.com/jsref/event_onmouseover.asp
Related
Someone can help me add next and prev button for this slider. I found this code in blog,...
Here, this code http://jsfiddle .net/dk5sy93d/
I'm new to Jquery (since yesterday). I have to make a simple slider in an upcoming web development competition. This is just something I wrote because everything I seem to come across has a large library attached to it.
//Manual Slider Control Jquery
$("#slider-next").click(function(){
if($(".slider-a").is(":visible")){
$(".slider-a").hide(3000);
}else{
$(".slider-b").hide(3000);
}
});
$("#slider-prev").click(function(){
if(($(".slider-a").not(":visible")) && ($(".slider-b").is(":visible"))){
$(".slider-a").show(3000);
}else if(($(".slider-a").not(":visible")) && ($(".slider-b").not(":visible"))){
$(".slider-b").show(3000);
}
});
/* Slider CSS */
#slider-container{
margin:auto;
text-align:center;
}
#slider-content{
margin:auto;
height:300px;
width:400px;
overflow:hidden;
border:2px solid #000;
background-color:grey;
}
#slider-controls{
margin:auto;
text-align:center;
width:400px;
}
#slider-controls button{
background-color:#000;
padding:0 15px;
font-size:1em;
border-radius: 0 0 15px 15px;
color:white;
}
#slider-prev{
float:left;
}
#slider-next{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider-container">
<div id="slider-content">
<img class="slider-img slider-a" src="http://www.light2015.org/.imaging/stk/pop/zoom/dam/CosmicLight/A-Universe-of-Images/Vela_Supernova_Remnant/jcr:content/Vela_Supernova_Remnant.2014-07-17-20-32-16.png" width="400px" height="300px" />
<img class="slider-img slider-b" src="http://www.sciuridae.co.uk/photography/images/blown_out_skies/two_images.jpg" width="400px" height="300px" />
<img class="slider-img clider-c" src="http://www1.hw.ac.uk/estate/images/landscape-images/cycleways-and-footpaths-big.JPG" width="400px" height="300px" />
</div>
<div id="slider-controls">
<button id="slider-prev">Previous</button>
<button id="slider-next">Next</button>
</div>
</div>
Please comment on this answer if you feel it can be simplified further and offer the same (if not improved) functionality.
Here is the JS for your HTML.
http://jsbin.com/nalewayume/1/edit?js,console,output
function nextSlide() {
if(currentSlide < allSlides) {
$slide.eq(currentSlide).fadeOut(200);
$slide.eq(currentSlide + 1).fadeIn(200);
currentSlide+=1;
}
}
This piece i am creating is a comic.
the comic images will be hidden until a user clicks the mouse
the hope is that the images will then reveal them self one at a time (per users click)
at the moment however when one image is shown it will dissapear when the user clicks to show the next image
how can i set it up so that the image doesnt dissapear when the user clicks?
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: #1F2A22;
}
h1 {
color: #00ff00;
}
</style>
</head>
<body>
<img id="fans6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans6.png">
<img id="impact6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="impact6.png">
<img id="text6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text6.png">
<img id="panel7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel7.png">
<img id="atom7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="atom7.png">
<img id="fantext7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text fan7.png">
<img id="text7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text7.png">
<img id="fans7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans7.png">
<img id="panel8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel8.png">
<img id="bang8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="bang8.png">
<img id="panel9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel9.png">
<img id="reporter9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="reporter9.png">
<img id="text9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text9.png">
<img id="panel10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel10.png">
<img id="full10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel full10.png">
<img id="text10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text10.png">
<img id="end10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="the end10.png">
<script>
var curImage = 0;
var images = ["fans6","impact6","text6"];
function windowClick() {
document.getElementById(images[curImage]).style.opacity = "0";
if(curImage < images.length - 1)
{
document.getElementById(images[0]).style.opacity = "1";
curImage = 0;
}
}
window.onclick = windowClick;
</script>
</body>
</html>
By removing this line
document.getElementById(images[curImage]).style.opacity = "0";
The image won't disappear when a user clicks.
But i guess you should modify your code a little (I don't think current version will work the way you want it to work)
function windowClick() {
if(curImage < images.length - 1)
{
document.getElementById(images[curImage]).style.opacity = "1";
curImage++;
}
}
Because every time you should increment the curImage and then display the image with index curImage to show the next image.
Additionally to script problems pointed out by void, it seems all of your images lie on top of each other due to same absolute position and size, so that one of them will occlude all others.
I have built a simple page that displays text and various formatted elements and also a photo gallery. The photo gallery has a horizontal scrollbar beneath a larger image. The scroll area contains thumbnails that are loaded into the larger image area after they are clicked on. This works fine in Chrome, Firefox, and Safari.
However, in Internet Explorer the JavaScript is blocked initially and the user must allow it to run. Prior to the JavaScript being allowed by the user the page is displayed in the background but the formatting for the photo gallery is incorrect because it relies upon the currently blocked JavaScript (the larger images that are currently hidden are displayed down the page and it looks bad). Is there a workaround where I do not display the webpage at all until after the JavaScript is unblocked or perhaps another easy solution?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style type="text/css">
body {
/*font-size:12px; modify this within each element*/
}
#wrapper {
width:950px;
height:800px;
margin-left:5px;
margin-top:5px;
border-top:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:5px solid #000000;
border-left:5px solid #000000;
padding:0px;
}
#topwrap {
width:950px;
height:50px;
}
#topturqsq {
float:left;
width:250px;
height:50px;
background-color:#7ECCC0;
}
#topartdeco{
float:left;
width:698px;
height:48px;
background-color:#FA8072;
padding:1px;
}
#aptname{
float:left;
width:248px;
height:149px;
border-bottom:1px solid #bbb;
vertical-align:top;
}
#contactbanner{
float:left;
width:690px;
height:29px;
border-bottom:1px solid #000000;
text-align:right;
font-size:20px;
padding-right: 10px;
padding-top:10px;
font-family:arial,helvetica,sans-serif;
}
#photogallery{
width:698px;
height:555px;
border-bottom:1px solid #bbb;
float:left;
}
#maintext{
font-size:15px;
font-family:arial,helvetica,sans-serif;
}
ul{
list-style-type:none;
margin:10;
padding:0;
vertical-align:top;
position:relative;
}
a{
display:block;
color:#000000;
text-decoration:none;
}
#leftnav{
position:relative;
width:248px;
height:600px;
font-size:20px;
float:left;
font-family:arial,helvetica,sans-serif;
}
#leftwrap{
position:relative;
float:left;
width:249px;
height:750px;
border-right: 1px solid black;
}
#linkDiv{
width:698px;
height:120px;
overflow:auto;
white-space:nowrap;
border: 1px solid black;
float:left;
padding-top:15px;
}
#divLinks{
float:left;
}
#container1,#container2,#container3,#container4,#container5,#container6,#container7,#container8{
width:500px;
height:375px;
margin:0 auto;
padding-left:95px;
padding-top:20px;
padding-bottom:20px;
}
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById('container'+idInfo).style.display = 'block';
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="topwrap">
<div id="topturqsq">
</div>
<div id="topartdeco">
<img src="images/artdeco.png" width="349" align="left"> <img src="images/artdeco.png" width="349" align="right">
</div>
</div>
<div id="leftwrap">
<div id="aptname">
<img style="position:relative; top:15px; left:0px;" src="images/banner.png" width="248" >
</div>
<div id="leftnav">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Nearby</li>
<li>Photos</li>
<li>Lease</li>
<li>Contact US</li> <br>
<li><span style="text-align:center;display:block;text-decoration:underline">Floor Plans </span></li>
<li>2 Bedroom</li>
<li>1 Bedroom</li>
<li>Corporate</li>
<li>Efficiency</li>
</ul>
</div>
</div>
<div id="contactbanner">
<img src="images/phone.png" height="20" > Call us: (555) 555 - 5555
</div>
<div id="photogallery">
<div id="divLinks">
<div id="container1"><img src="images/Chrysanthemum.jpg" width="500" height="375" border="1"></div>
<div id="container2"><img src="images/Desert.jpg" width="500" height="375" border="1"></div>
<div id="container3"><img src="images/Hydrangeas.jpg" width="500" height="375" border="1"></div>
<div id="container4"><img src="images/Jellyfish.jpg" width="500" height="375" border="1"></div>
<div id="container5"><img src="images/Koala.jpg" width="500" height="375" border="1"></div>
<div id="container6"><img src="images/Lighthouse.jpg" width="500" height="375" border="1"></div>
<div id="container7"><img src="images/Penguins.jpg" width="500" height="375" border="1"></div>
<div id="container8"><img src="images/Tulips.jpg" width="500" height="375" border="1"></div>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
<div id="linkDiv">
<img src="images/Chrysanthemum.jpg" width="120" height="90">
<img src="images/Desert.jpg" width="120" height="90">
<img src="images/Hydrangeas.jpg" width="120" height="90">
<img src="images/Jellyfish.jpg" width="120" height="90">
<img src="images/Koala.jpg" width="120" height="90">
<img src="images/Lighthouse.jpg" width="120" height="90">
<img src="images/Penguins.jpg" width="120" height="90">
<img src="images/Tulips.jpg" width="120" height="90">
</div>
</div>
<div id="maintext">
<strong>heading</strong>
<blockquote>bunch of text</blockquote>
</div>
</div>
</body>
</html>
I guess in theory you could * { display:none; } to hide everything, then bring it back when JS is accepted.. assuming that version of IE supports the wildcard (*) in CSS.
Update: Since you're doing this with the header.. I'm just going ot assume it has an ID of header..
<div id="header" style="display:none;">CONTENT</div>
<script type="text/javacript">
window.onload = function(){
var h = document.getElementById('header');
h.style.display = 'block';
}
</script>
I'm trying to build a simple image slider for my webpage, and here's the code that I have come up with using jquery, css -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{
margin:0; padding:0;
}
#container{
position:absolute; left:100px; top:100px;
width:102px;height:102px;
border:1px solid red;
overflow:hidden; display:inline;
}
#container img{float:left;}
</style>
<script type="text/javascript">
$(document).ready(function(){
setInterval(slideImages, 5000);
function slideImages(){
$('#container img:first-child').clone().appendTo('#container');
$('#container img:first-child').remove();
}
});
</script>
</head>
<body>
<div id="container">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</body>
</html>
While the code works and displays the images, I would like to add some more effects to it by having the new image slide into the 'container' pane. Like sliding from right direction to the left, and then staying there for sometime and then the next image replaces the existin one by again sliding from right to left.
Please guide me as to how to get the sliding r-to-l effect. I know i can slide up/down using jquery.. but how to do it l-r or r-l?
Thanks!
Click here to view example I knocked up. You can easily change the code to work on a timed interval:
JS
$(document).ready(function(){
$('#rotator > a.arrow.left').click(function(e){
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').first().animate({marginLeft:"-=310px"}, function(){
$(this).appendTo(rotator).removeAttr("style");
});
});
$('#rotator > a.arrow.right').click(function(e){
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({marginLeft:"0"});
});
});
CSS
#rotator{width:310px; height:220px; position:relative; overflow:hidden; position:relative;}
#rotator .images{width:1000%; position:relative; z-index:1;}
#rotator a.arrow{width:18px; height:41px; display:block; z-index:2; text-indent:-50000em; position:absolute; top:89px; background:#FFF;}
#rotator a.arrow.left{left:0;}
#rotator a.arrow.right{right:0;}
#rotator .images .imageHolder{width:310px; float:left; height:220px; position:relative;}
#rotator .images .imageHolder span {width:290px; margin: 10px; color:#FFF; font-size:18px; position:absolute; top:0; left:0; z-index:4;}
#rotator .images .imageHolder img{width:310px; height:220px; position:absolute; display:block; top:0; left:0; z-index:3;}
HTML
<!DOCTYPE html>
<html>
<body>
<div id="rotator">
<div class="images">
<div class="imageHolder">
<span>Image Number 1</span>
<img src="http://www.random-images.com/image/obj21geo38pg1p5.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 2</span>
<img src="http://www.jpl.nasa.gov/images/wise/20100217/pia12832-browse.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 3</span>
<img src="http://www.boingboing.net/images/_images__wikipedia_commons_a_aa_Polarlicht_2.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 4</span>
<img src="http://www.aviation-images.com/user/zooms/118/451nw/aviation-images.com21079968wm.jpg?d=1179938582" alt="" />
</div>
</div>
</div>
</body>
</html>
Will Slide works for you?
$("div").click(function () {
$(this).hide("slide", { direction: "left" }, 1000);
});
Hey everyone! I have a problem with this plugin. I have no idea what is wrong here... All I did was the same as in the examples.
HTML
<div id="parallax">
<div style="width: 830px; height: 280px;">
<img style="position:absolute; top:0px; left:350px;" alt="" src="images/smile1.png"/>
</div>
<div style="width: 800px; height: 250px;">
<img style="position:absolute; top:200px; left:0px;" alt="" src="images/smile1.png"/>
</div>
<div style="width: 1000px; height: 260px;">
<img style="position:absolute; top:100px; left:150px;" alt="" src="images/smile1.png"/>
</div>
</div>
CSS
#parallax {
background:#ccc;
position:absolute;
overflow:hidden;
width:700px;
height:300px;
}
JS
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
</script>
and nothing happened... pictures are standing without any movements... any ideas?
Unfortunately his site has not been updated for a while, you can get version 1.0 from his GitHub repo which works with jQuery v1.7 (latest version at the time of writing).
https://github.com/stephband/jparallaxjParallax github