this is my code.my image dimensions are 1024X768 but i m getting a right-left scroll bar.and when i scroll to right ,i get a black background cutt off from my total image.
Help me out plzz
body {
background-image: url('stareffect1.jpg');
}
h1 {
position: relative;
left: 480px;
}
form #Edit1 {
position: relative;
top: 58px;
left: 341px;
}
form #Edit2 {
position: relative;
top: 67px;
left: 341px;
}
<html>
<body>
<img src="banner.jpg" width="500" height="70" />
</head>
</head>
<hr/>
<br/>
<a href="forum.php">
<div style="position:absolute; left:347px; top:165px;">
<img src="images/forum.jpg" />
</div>
</a>
<a href="credits.php">
<div style="position:absolute; left:481px; top:165px;">
<img src="images/credits.jpg" />
</div>
</a>
<a href="rules.php">
<div style="position:absolute; left:615px; top:165px;">
<img src="images/rules.jpg" />
</div>
</a>
<a href="logout.php">
<div style="position:absolute; left:740px; top:165px;">
<img src="images/logout.jpg" />
</div>
</a>
<br/>
<br/>
<br/>
<div style="position:relative; left:339px; top:49px">
<img src="images/actor.jpg" width="250" height="300" />
</div>
<div style="position:absolute; left:600px; top:225px">
<img src="images/river.jpg" width="250" height="300" />
</div>
</body>
</html>
Chris is right your html is not well formatted. Try nesting the tags like below
<html>
<head>
<style type="text/css">
body
{
background-image:url('redbg.png');
}
h1
{
position: relative;
left: 480px;
}
form #Edit1
{
position:relative;
top:58px;
left: 341px;
}
form #Edit2
{
position:relative;
top:67px;
left:41px;
}
</style>
</head>
<body>
<img src="banner.jpg" width="500" height="70" />
<style type="text/css">
body {background-image:url('stareffect1.jpg');}
</style>
</head>
<style type="text/css">
h1
{
position: relative;
left: 480px;
}
form #Edit1 { position: relative;
top: 58px;
left: 341px;
}
form #Edit2 { position: relative;
top: 67px;
left: 341px;
}
</style>
<hr/>
<br/>
<div style="position:absolute; left:347px; top:165px;"><img src="images/forum.jpg"/></div>
<div style="position:absolute; left:481px; top:165px;"><img src="images/credits.jpg"/></div>
<div style="position:absolute; left:615px; top:165px;"><img src="images/rules.jpg"/></div>
<div style="position:absolute; left:740px; top:165px;"><img src="images/logout.jpg"/></div>
<br/>
<br/>
<br/>
<div style="position:relative; left:339px; top:49px"></div>
<div style="position:absolute; left:600px; top:225px">
<img src="images/river.jpg" width="250" height="300" />
</div>
</body>
</html>
GB
Related
I have created one "main image" in Html. Now i wanted to display multiple images just below the "main image" when i click on "main image" on the same page. this is my below code which create one "main image" in Html.
<html>
<body>
<p>The image is a link.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>
How to display multiple images just below the "main image" in same page?
$(document).ready(function() {
$('.thumbs').hide();
$('.main-image').on('click', function(){
$('.thumbs').show();
});
});
.outer {
width:600px;
float:left;
}
.main-image ,
.main-image img {
width:100%;
float:left;
overflow:hidden;
}
.thumbs {
width:100%;
float:left;
margin-top:15px;
}
.thumbs img {
display:inline-block;
width:100px;
margin-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
<div class="main-image">
<img src="about.jpg" alt="about" />
</div>
<div class="thumbs">
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
<img src="about.jpg" alt="about" />
</div>
</div>
this is work for me
this is what you want ?
https://jsfiddle.net/bfahmi/2m16vjj1/3/
$(document).ready(function() {
$('.featured-image').on('click', '#btn-display', function() {
if ($('.gallery').is(':visible')) $('.gallery').hide();
else $('.gallery').show();
});
});
.images {
width: 50%;
padding: 0 auto;
}
.featured-image,
.gallery {
width: 100%;
text-align: center;
}
.gallery {
display: none;
margin: 10px 0;
}
.featured-image img {
width: 100%;
max-width: 300px;
}
.gallery img {
width: 20%;
max-width: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="images">
<div class="featured-image">
<a id="btn-display" href="#">
<img src="https://placehold.it/300x300/?text=featured-image">
</a>
</div>
<div class="gallery">
<img src="https://placehold.it/300x300/?text=image-1">
<img src="https://placehold.it/300x300/?text=image-2">
<img src="https://placehold.it/300x300/?text=image-3">
<img src="https://placehold.it/300x300/?text=image-4">
</div>
</div>
You can achieve your goal with a following code:
img {
width:42px;
height:42px;
border:0;
}
a {
text-decoration:none;
}
<p>The image is a link.</p>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<div>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
<a href="/">
<img src="http://placehold.it/42x42" alt="HTML">
</a>
</div>
I want to design a page in which contents of page like header,navigation bar, buttons,headings, paragraphs etc should be placed on slideshow. But the problem is when I add contents on div container or body, contents does not appear on slideshow properly. Can any one please tell me what should I do?Here is the code:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //This is jquery code for fade slideshow
$('.pics').cycle('fade');
});
</script>
<style type="text/css">
.pics { //this is style of container (div) which contain images
height: 100%;
width: 100%;
position:absolute;
left:0;
top:0;
margin-right:0;
}
.pics img { //style of images
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h3>This is heading</h3>//It is not appearing properly
<div class="pics"> //html code for container
<img src="adv1_wheels_ferrari_f430-HD.jpg" width="100%" height="500" />
<img src="kepler_motion-HD.jpg" width="100%" height="100%" />
<img src="nissan_gt_r_gold-HD.jpg" width="100%" height="100%" />
<p>This is paragraph</p>// this is insides div and also not appearing properly
</div>
</body>
</html>
Try This
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //This is jquery code for fade slideshow
$('.pics').cycle('fade');
});
</script>
<style type="text/css">
.pics { //this is style of container (div) which contain images
height: 100%;
width: 100%;
position:relative;
left:0;
top:0;
margin-right:0;
}
.pics img { //style of images
width: 100%;
height: 100%;
}
.content{
position:absolute;
top:10;
left:10;
color:#fff;
padding:10px;
background: rgba(45, 195, 89, 0.57);
z-index:99
}
</style>
</head>
<body>
<div class="pics"> <!--Slider images goes here-->
<img src="http://dummy-images.com/abstract/dummy-480x270-Stripes.jpg" width="100%" height="500" />
<img src="http://dummy-images.com/abstract/dummy-454x280-Glass.jpg" width="100%" height="100%" />
<img src="http://dummy-images.com/abstract/dummy-576x1024-Bottles.jpg" width="100%" height="500" />
</div>
<div class="content"> <!--Slider content goes here-->
<h3>This is heading</h3>
<p>This is paragraph This is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraph This is paragraph</p>
</div>
</body>
Check this out http://jsfiddle.net/xfawfyaw/1/
CSS:
.pics {
height: 500px;
width: 100%;
position:relative;
left:0;
top:0;
margin-right:0;
overflow:hidden;
}
.slide div, .slide img {
height:500px;
}
.slide p {
position:absolute;
bottom:-12px;
}
.slide h3 {
position:absolute;
top:-20px;
}
.slide h3, .slide p {
background:rgba(0,0,0,0.5);
color:#fff;
left:0;
right:0;
padding:10px;
}
HTML:
<div class="pics">
<div class="slide">
<h3>This is heading</h3>
<p>This is paragraph</p>
<img src="http://www.mundologia.de/wp-content/uploads/raemisgummen_0188-1080x500.jpg" width="100%" height="500" />
</div>
<div class="slide">
<h3>This is heading</h3>
<p>This is paragraph</p>
<img src="http://www.cycletrailsaustralia.com/images/832.jpg" width="100%" height="100%" />
</div>
<div class="slide">
<h3>This is heading</h3>
<p>This is paragraph</p>
<img src="http://www.webidesigns.com/wp-content/uploads/2015/03/nature-background-cities-flowers-papel-images-wallwuzz-hd-wallpaper-18115-1080x500.jpg" width="100%" height="100%" />
</div>
</div>
I need to design gallery in similar to example below with responsive feature.
so far i managed to find few galleries but each one had one or the other limitation. Gallery i am working on is based on jssor example http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html
I am able to make some modification to the code and make it similar to my requirement, Unfortunately same code which is working on my local system is not working on JSFiddle.
At present i tried to add the caption to the jssor gallery but it is not working, while my actual requirement is for two separate caption one will show the title of the image & other will be link to a website or web page...
I would appreciate help in this regarding or a gallery which is similar to my requirement I have spend two days trying to get my hands on good code which can be easy to customize to my design.
Code sample:
<div style="width:1000px; background-color:green; margin-top:30px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px; height: 480px; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left:0; top: 0px; width: 550px; height: 480px; overflow: hidden;">
<div>
<img u="image" src="http://www.jssor.com/img/travel/01.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-01.jpg" /> <span> Title</span>
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/02.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-02.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/03.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-03.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/04.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-04.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/05.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-05.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/06.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-06.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/07.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-07.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/08.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-08.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/09.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-09.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/10.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-10.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/11.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-11.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/12.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-12.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/13.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-13.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/14.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-14.jpg" />
</div>
</div>
<!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 140px; left: 10px;">
</span>
<!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 140px; left: 490px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin 02 Begin -->
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 430px; height: 480px; right:0px; bottom: 0px; margin-left:2px;">
<div u="slides" style="cursor: move;" class="thumbnail-custom">
<div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;">
<div class=w>
<thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate>
</div>
<div class=c></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
</div>
<!-- Jssor Slider End -->
</div>
Please remove the unwanted '/' at line 42 of scripts.
And make following changes,
Add css for captions
/* caption css */
.captionOrange, .captionBlack
{
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.captionOrange
{
background: #EB5100;
background-color: rgba(235, 81, 0, 0.6);
}
.captionBlack
{
font-size:16px;
background: #000;
background-color: rgba(0, 0, 0, 0.4);
}
a.captionOrange, A.captionOrange:active, A.captionOrange:visited
{
color: #ffffff;
text-decoration: none;
}
a.captionOrange:hover
{
color: #eb5100;
text-decoration: underline;
background-color: #eeeeee;
background-color: rgba(238, 238, 238, 0.7);
}
Add caption options
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
Add captions to slide
<div u=caption t="L" du="2000" class="captionOrange" style="position:absolute; left:20px; top: 300px; width:500px; height:30px;"> Caption 1 </div>
<a u="caption" t="R" class="captionOrange" href="http://www.yourdomain.com" style="position: absolute; top: 300px; left: 630px; width: 250px; height: 30px;">www.yourdomain.com</a>
See http://jsfiddle.net/77uuamcn/4/
I have similar case like facebook wall.
In place of post in my case user enters URL.
Initially it looks like this:
I have text box for this in place of text area.
Now when user takes cursor it changes to :
Problem with me is how I expand textbox and show button like share in facebook when user takes cursor into textbox.
More when user increase the content into textarea it, downside div which contains button automatically move down.
In my case when user enters url , I show url preview below text box. preview size varies. So how can i create similar case show that button below it automatically move downward.
MY initial view:
When user enter cursor into Text box it changes to:
I have manually place buttons at some distance. I want them to automatically repositioned as per preview size.
when user enters url it looks like this:
I want to show buttons just below textbox like facebook does. When url entered as per preview size the buttons should move downward.
Any idea how can I achieve this?
Buttons are css button, placed into div. Working in PHP.
Source code:
http://codetidy.com/6983/
<html>
<head>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<link href="content/rateit.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link href="content/bigstars.css" rel="stylesheet" type="text/css">
<style>
//css for button
label {
color: #B90000; /* makes the text-black */
}
label2 {
color: #3b5999; /* makes the text-black */
}
</style>
<link rel="stylesheet" class="cssStatics" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" class="cssButtons" type="text/css" href="css/linkPreview.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/linkPreview.js" ></script>
<script>
$(document).ready(function() {
$('.linkPreview').linkPreview();
// setting max number of images $('.linkPreview').linkPreview({imageQuantity: "put here the number"});
// e.g. $('.linkPreview').linkPreview({imageQuantity: 15});
});
</script>
</head>
<body style="height: 560px">
<div>
<img alt="" src= "3.png" style="top: 15px; right: 689px; position: absolute; height: 91px; width: 417px"/>
</div>
<div >
<div style="top: 20; left:20"> <img id="i1" src=""> </img>
</div>
<div class="rateit bigstars" id="rateit99" style="z-index: 1; display:none; left: 45px; top: 45px;" data-rateit-starwidth="32" data-rateit-starheight="32">
<label color="red" style="z-index: 1; left: 600px; top: 180px;" onclick="alert($('#rateit99').rateit('value'))">
<b>
Rate Me
</b>
</label>
</div>
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
<!-- <div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">
<label><b>Enter URL:</b></label><br/>
</div> -->
<div style=" width: 15%; margin: auto; margin-top: -10px; text-decoration: none; text-shadow: 0 1px 0 #fff; padding: 10px 20px; text-align: justify; ">
<div class="linkPreview" style="z-index: 2;">
<div id="previewLoading"></div>
<div style="float: left;">
<div style="left: 420px; top: 40px; position: absolute; margin-top: 0px">
<input type="text" id="text" name="sent" contenteditable="true" style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."/></input>
<div id="postPreview" style="display:none"></div>
</div>
<div style="clear: both"></div>
</div>
<div style="left: 420px; top: 70px; position: absolute; margin-top: 0px">
<div id="preview">
<div id="previewImages">
<div id="previewImage"><img src="img/loader.gif" style="margin-left: 43%; margin-top: 39%;" ></img>
</div>
<input type="hidden" id="photoNumber" value="0" />
</div>
<div id="previewContent">
<div id="closePreview" title="Remove" ></div>
<div id="previewTitle"></div>
<div id="previewUrl"></div>
<div id="previewDescription"></div>
<div id="hiddenDescription"></div>
<div id="previewButtons" >
<div id="previewPreviousImg" class="buttonLeftDeactive" ></div><div id="previewNextImg" class="buttonRightDeactive" ></div>
<div class="photoNumbers" ></div>
<div class="chooseThumbnail">
Choose a thumbnail
</div>
</div>
<input type="checkbox" id="noThumb" class="noThumbCb" />
<div class="nT" >
<span id="noThumbDiv" >No thumbnail</span>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
<div class="previewPostedList"></div>
</div>
</div>
<div style="z-index: 1; left: 420px; top: 280px; position: absolute; margin-top: 0px" onclick="myFunction(document.getElementById('text').value)" >
<button onclick="show2(); myfunc();" id="b1" >
Get Sentiment
</button>
</div>
<div id="d1" height="40" width="60" name="sent2" style=" border:1px solid black; z-index: 1; left: 950px; top:80px; position: absolute; margin-top: 0px" placeholder="Preview title" >
</div>
<div id="d2" height="40" style="border:1px solid black; z-index: 1; left: 950px; top:100px; position: absolute; margin-top: 0px; min-width:60; overflow:auto" placeholder="Preview Url">
</div>
<div id="d3" height="80" border="1" style="border:1px solid black; z-index: 1; left: 950px; top:140px; position: absolute; margin-top: 0px" placeholder="Preview Desciption">
</div>
</form>
<div style="z-index: 1; left: 720px; top:280px; position: absolute; margin-top: 0px">
<button onclick="makeAjaxCall(); return false;" value="View Graph" >
View Graph
</button>
</div>
</div>
<h4>
<div id="txtHint" align="justify" style="z-index: 1; display:none; color:#C7F0FF; left: 35px; top: 260px; padding: 20px; position: absolute; border:1px; margin-top: 0px; width:300px;height:350px;overflow:auto; -webkit-border-radius: 12px; -moz-border-radius: 7px; border-radius:7px; background: -webkit-gradient(linear, left top, left bottom,color-stop(100%, #F70247), color-stop(150%, white), color-stop(100%, #D7E9F5)); background: -moz-linear-gradient(top, #F70247 0%, #F70247 10%, #F70247 130%); ">
</div>
</h4>
<script src="content/jquery.rateit.js" type="text/javascript"></script>
</body>
</html>
I am working on a simple image gallery page that contains a main image that is swapped whenever a thumbnail image is clicked. I know that the way I am doing it would be far easier in JQuery but I am determined to get a good grip on JS before I progress to JQuery!
Here is the problem:
I want to keep the main image at 1000px wide with overflow-x only (done already) now when a thumbnail image is clicked all that changes is the main image. I think I am close with the JS code and that it just needs a bit of tweeking by someone who understands what I have done wrong here! All I am trying to do is getElementById (the URL) and swap it!
I do not know how to upload images to JS fiddle so my example is image less but all code is there and working fine with images locally.
http://jsfiddle.net/Margate/zJjys/
Code is as follows:
//Thank you in advance for any help
<html>
<head>
<title>Confused!</title>
<style type="text/css">
#main-image-container{width: 1000px; height: 350px; position: absolute; top: 172px; left: 0px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;}
#graffiti-panorama-image-bar{width: 600px; height: 95px; position: absolute; top: 540px; left: 200px; border: 1px solid black; overflow: auto; background-color: white;}
.image{position: absolute; cursor: pointer;}
#center-page{border:1px solid red; width: 1005px; height: 700px; position: absolute; margin: 0px auto;}
<body>
<div id="center-page">
<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>
<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main1()" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main2()" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main3()" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main4()" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main5()" class="image" style=" left: 1260px;" />
</div>
</div>
<script type="text/javascript">
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
</script>
</body>
</html>
Try changing:
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
To:
function Main1(){var obj=document.getElementById("image"); obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image"); obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image"); obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image"); obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image"); obj.src="image-05.jpg";}
The .src property is a property of the image itself, not its style collection.
You can also consolidate these functions into a single function, and pass the image URL as a parameter:
function Main(imageUrl)
{
var obj=document.getElementById("image");
obj.src=imageUrl;
}
Then call it with:
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />
To follow up lan's comment:
<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>
<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main('image-02.jpg')" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main('image-03.jpg')" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main('image-04.jpg')" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main('image-05.jpg')" class="image" style=" left: 1260px;" />
</div>
</div>
<script type="text/javascript">
function Main(image) {
document.getElementById("image").src=image;
}
</script>
</body>
</html>