I'm attempting to create a page that will allow me to select from a series of images, with the option of choosing your own via URL, but I have stumbled on an issue. I am attempting to use buttons placed under the sample images to change the source image that is piped into a function, but I can't seem to get it to work. Here is my code:
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image1)">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage(Image2)">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage()">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
Does anyone know why it might not be passing the images through? They display correctly on the page, so I know the source is correct, but they don't seem to want to be passed to the function.
Try updating your javascript function to:
function updateImage(imageUsed) {
var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d"),
image = document.getElementById(imageUsed);
ctx.drawImage(image,0,0,500,500);
}
Then output your buttons like:
<button onclick="updateImage('Image1')">Use this image</button>
You need to pass the ID of the element as a string
<button onclick="updateImage('Image1')">Use this image</button>
and in updateImage method you need get the image object from the passed ID
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
**imageUsed = document.getElementById(imageUsed);**
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
Here is the full working code
<html>
<head>
<script>
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
imageUsed = document.getElementById(imageUsed);
var ctx = c.getContext("2d");
ctx.drawImage(imageUsed,0,0,500,500);
}
</script>
<style>
#header
{
background-color:brown;
color:black;
text-align:center;
padding:5px;
}
#defaultSelection
{
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
text-align:center;
}
#canvasID
{
background-color:grey;
width:1000px;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body">
<div id="header">
<h1> Welcome</h1>
<h2>Please select an image, or upload your own below.</h2>
</div>
<div id="defaultSelection">
<img id="Image1" src="Image1.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image1')">Use this image</button>
<br>
<img id="Image2" src="Image2.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image2')">Use this image</button>
<br>
<img id="Image3" src="Image3.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image3')">Use this image</button>
<br>
<img id="Image4" src="Image4.jpg" style="width:128px;height:128px">
<br>
<button onclick="updateImage('Image4')">Use this image</button>
</div>
<div id="canvasID">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;">
</canvas>
</div>
</body>
</html>
I think you need to load the image, so it can find the URL
function updateImage(imageUsed)
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById(imageUsed);
ctx.drawImage(img,0,0,500,500);
}
Related
I have an array which picks a movie at random and below I have movie posters , I just click on the poster and it brings me to the movie on netflix, it would be great if the surrounding color of the movie poster changed to green so that it would be easier to find.
javascript
function GetValue()
{
var myarray= new Array("13 assassins"); // just an example
var random = myarray[Math.floor(Math.random() * myarray.length)];
document.randform.randomfield.value = random;
}
</script>
html
<body>
<Div id=maincontent>
<section id="topcontent">
<form name="randform">
<input type="button" id="btnSearch" value="Click for a random movie" onclick="GetValue();" />
<input type="text" name="randomfield" value="" size="50">
</form>
<section id="movies">
<!--13 assassins -->
<div id="movie">
<a href="link to film">
<img src="images/13.jpg" alt="player" width="225" height="325">
</a>
</div>
css
#movie{
margin-top:5%;
width:225px;
height:325px;
float:left;
background-color:whitesmoke; //want this to be green when the movie is picked
border-radius:5px;
margin-left:2%;
padding:2% 3%;
margin-bottom:2%;
margin-right:2%;
}
function GetValue()
{
var myarray= new Array("13 assassins"); // just an example
var random = myarray[Math.floor(Math.random() * myarray.length)];
document.randform.randomfield.value = random;
document.getElementById(random).style.border = "2px solid green";// use this if you have multiple images .and to identify each image give the same id as the values in your array
// but if you want to set border to div movie then do this:
document.getElementById('movie').style.border = "2px solid green";// comment it if not required
}
#movie{
margin-top:5%;
width:225px;
height:325px;
float:left;
background-color:whitesmoke; //want this to be green when the movie is picked
border-radius:5px;
margin-left:2%;
padding:2% 3%;
margin-bottom:2%;
margin-right:2%;
}
<div id=maincontent>
<section id="topcontent">
<form name="randform">
<input type="button" id="btnSearch" value="Click for a random movie" onclick="GetValue();" />
<input type="text" name="randomfield" value="" size="50">
</form>
<section id="movies">
<!--13 assassins -->
<div id="movie" >
<a href="link to film">
<img src="images/13.jpg" alt="player" width="225" height="325" id="13 assassins">
</a>
</div>
</section>
You can change css with jquery
$("#movie").css("background-color", "green");
If you have a set and get div for film, you can set div id for every film. You can use database id for film.
$("#film356").css("background-color", "green");
So I have been able to make some progress with my problem but have encountered something a little unexpected/confusing. I have been able to add my script to my web page, however, the two do not work together. Without the script, the page appears as I would like. With the script, the script runs and overrides the web page. What happens is a random picture shows up in the top left corner of the screen, but nothing from the html file appears. I have included all my code (html, javascript, css) and if anyone can provide some guidance it would be really greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<title>Monroe Public Library</title>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<ul class = "nav">
<span>Quick Links</span>
<li>Home Page</li>
<li>Online Catalog</li>
<li>Friends of MPL</li>
<li>New Books and Other Good Reading</li>
<li>Ohio Virtual Library</li>
<li>Internet Public Library</li>
<li>Services and Collection</li>
<li>Adult Programs</li>
<li>Teen Central</li>
<li>Children's Room</li>
<li>Computers at MPL</li>
<li>Computer Rules and Procedures</li>
<li>Staff Directory</li>
<li>Library Records</li>
</ul>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<form id="login" method="post" action="">
<p>
<label for="username" class="center" id="input"> Username:</label>
<input type="text" id="username" name="username" size="20" />
</p>
<p>
<label for="password" class="center" id="input"> Password:</label>
<input type="password" id="password" name="password" size="20" />
</p>
<p>
<label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
<input type="text" id="captcha" name="captcha" size="6" />
</p>
<p id="login"> </p>
<p id="login">
</p>
<script src="mpl.js"></script>
<p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
<div id="images">
</div>
<p align="center">
<input type="submit" value="View Library Records" />
</p>
</form>
</div>
<div id="address">
<span class="addressBold">Monroe Public Library</span>
580 Main Street, Monroe, OH 45050
<span class="addressBold">Phone</span>(513) 555-0211
<span class="addressBold">Fax</span>(513) 555-0241
</div>
</div>
</body>
</html>
window.onload = function ()
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=new Array()
//specify random images below. You can have as many as you wish
pictureNumbers[1]="0.jpg"
pictureNumbers[2]="1.jpg"
pictureNumbers[3]="2.jpg"
pictureNumbers[4]="3.jpg"
pictureNumbers[5]="4.jpg"
pictureNumbers[6]="5.jpg"
pictureNumbers[7]="6.jpg"
pictureNumbers[8]="7.jpg"
pictureNumbers[9]="8.jpg"
pictureNumbers[10]="9.jpg"
var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
if (randomNumber==0)
{
randomNumber=1
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==1)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==2)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==3)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==4)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==5)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==6)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==7)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==8)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==9)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==10)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
}
#charset "UTF-8";
/* CSS Document */
body
{
margin-top:0;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#FFC;
}
#head
{
background-color:orange;
}
#page
{
width: auto;
margin" 0 auto;
background-color: white;
border-top: none;
}
#links
{
position:absolute;
width:10em;
border: 1px solid blue;
top: 72px;
background-color: white;
}
#main
{
margin-left: 12em;
}
#login
{
padding-top: 1em;
padding-left: 2em;
padding-bottom: 5em;
border: 1px solid blue;
}
#address
{
padding-top: 2em;
padding-left: 2em;
border-top: 1px solid blue;
}
#pageContent #main h2 {
color: #00F;
}
#input
{
background-color: orange;
padding-right: 20%;
}
Your problem is document.write. You should either be creating an element and appending it to a parent element in the DOM, or changing the src attribute of an existing element.
Creating Elements and appending them
var parent = document.getElementById("parent"),
img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)
Example
Here is a simplified example of what you are doing.
Fiddle: http://jsfiddle.net/L3WYH/1/
HTML
<div id="picture-frame"></div>
JS
var pictureNumbers = [],
pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
element = document.getElementById("picture-frame"),
image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)
To expand on #Gary's comment to the original post:
The calls to document.write(...) are what's causing your problem. Upon firing the 'onload' event, the browser closes the document for writing. Any subsequent calls to document.write will literally overwrite the whole page.
To fix this, you will need to do one of two things:
Make your calls to document.write outside of the window.onload event
Do as #MBottens mentioned in his answer, where you append new <img> elements to a DIV tag.
HTML :
<html>
<head>
<script>pushImages();</script>
<title>Float Image Gallery</title>
</head>
<body>
<button onclick="showAllGalleries();">Show gallery</button>
<div class="gallery">
<div class="gallery-close">
<a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
</div>
<div class="gallery-content">
<!-- Whenever need to add a image, add this code :
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
-->
<!--
Information :
When adding photo that is not 1:1, it will force shrink to 1:1.
-->
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
</div>
</div>
</body>
</html>
CSS :
<style>
.gallery {
display:none;
width:100%;
height:100%;
left:0;
bottom:0;
top:auto;
right:auto;
position:fixed;
background-color:#cccccc;
opacity:50%;
overflow-y: scroll;
}
.gallery-close {
width:auto;
height:auto;
margin-top:10px;
margin-left:10px;
}
.gallery-close-button {
width:30px;
height:30px;
}
.gallery-content {
width:100%;
height:auto;
text-align:center;
}
.gallery-content-image {
width:20%;
height:100%;
opacity:0.6;
filter:alpha(opacity=60);
}
.gallery-content-image:hover {
background-color:#ffffff;
opacity:1.0;
filter:alpha(opacity=100);
}
.gallery-image-cell {
width: 100%;
height: 0;
padding-bottom: 20%;
margin-left: auto;
margin-right: auto;
}
</style>
Javascript :
<script tyep="text/javascript">
function showAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='inline';
}
}
function hideAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='none';
}
}
function pushImages(){
var imageArray = document.getElementsByClassName("gallery-content-image")
var imageLinkArray[];
imageLinkArray.push("http://www.catchannel.com/images/feral-cats-birds.jpg");
imageLinkArray.push("http://www.catchannel.com/images/orange-tabbies.jpg");
imageLinkArray.push("http://thenypost.files.wordpress.com/2013/08/tiger132056-300x300.jpg");
imageLinkArray.push("http://bioexpedition.com/wp-content/uploads/2012/06/Indochinese-Tiger-picture.jpg");
imageLinkArray.push("http://www.east-northamptonshire.gov.uk/images/Dog_2.jpg");
imageLinkArray.push("http://www.pet365.co.uk/product_images/r/008/dd_black_with_dog__41452_zoom.jpg");
imageLinkArray.push("http://www.texasbirds.info/backyard/images/mountain_bluebird2_male.jpg");
imageLinkArray.push("http://www.honolulumagazine.com/images/2013/Oct13/Print/Bird_Fairy.jpg");
/*Use imageLinkArray.push("") to add a image; Add enough image.*/
for (var i=0; i<imageArray.length; i++){
imageArray[i].src = imageLinkArray[i];
}
}
</script>
I'm not sure where the problem is, but after clicking the button nothing happened.
Please help. Any help will be appreciated. Thank you.
<script>pushImages();</script>
This is calling a function before the DOM is even loaded, which should throw an error in your console. Place it at the bottom of your code or wrap it in window.onload = function() { .... }.
You're also missing an equal sign in this line: var imageLinkArray[]; (should be var imageLinkArray = [];.
I also suggest not practicing inline scripting. It's bad practice to do so. Try adding an event handler to the body (onclick only supports one event handler).
document.getElementsByTagName("body")[0].addEventListener("load", showAllGalleries, false);
I want to remove the script which i wrote that nakes the use of the class i.e. UiUx3DSSVFlow. Without hardcoding this internal class, how to make use of their parent #thumbs?
I should not any more make use of the specific classes in my script. In the future those classes could change to any other class name. I need the same functionality in another way without using the internal class names
HTML:
<!--Thumbs Image-->
<div id="thumbs">
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{
border:1px solid red;
width:100%;
}
#thumbs div{display:inline-block; }
#larger{
border:1px solid black;
width:100%;
}
#larger div{display:inline-block; }
jQuery:
function thumbs(i,incr){
var num_thumbs=2;
if(i===null){
i=$("#thumbs").prop('data-index'),
i+=num_thumbs*incr;
}
i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
$("#thumbs").prop('data-index',i);
$('#thumbs .UiUx3DSSVFlow').hide();
$('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}
$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
var that=this;
$('.t'+that[0]).click(function(){
thumbs(null,that[1]);
});
});
$('.tprev').click();
http://jsfiddle.net/T657N/33/
jsFiddle demo
review your HTML, CSS knowledge before jumping into JS!
You cannot have multiple ID inside one document!
A div element (as it's by default a block element) does not need the width:100%;
display: inline-block is best suitable and xbrowser for <span> elements, for other browsers you'll need to use some sort of hax like:
display:inline-block;
*display:inline;
zoom:1;
HTML:
<div id="thumbs">
<div>
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{border:1px solid red;}
#thumbs div{display:inline;}
jQuery:
var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;
function display(){
c= c===-1? tDivsN-1 : c%tDivsN;
$tDiv.hide().eq(c).show();
}
display();
$('.tprev, .tnext').on('click',function(e){
e.preventDefault();
var myCLass= $(this).hasClass('tnext') ? c++ : c--;
display();
});
i want to get box index number using Javascript. like i have four box so i want each box text have this appropriate number.
<head>
<script type="text/javascript">
function () {
var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){
}
}
</script>
<style>
.box {
float:left;
margin-left:20px;
position:relative
}
.width {
position:absolute;
left:0;
top:0;
color:#FFF;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="img/sample1.jpg" height="200" width="300" />
</div>
<div class="box">
<img src="img/sample2.jpg" height="200" width="350" />
</div>
<div class="box">
<img src="img/sample3.jpg" height="200" width="150" />
</div>
<div class="box">
<img src="img/sample4.jpg" height="200" width="100" />
</div>
</div>
</body>
window.onload=function() {
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
}
}
DEMO
Replace all your JS with this below and place the script tag as the last tag in your body tag to assure the DOM is ready when this is called. You could also call this function from the onload event.
(function(){
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML += "box"+i;
}
})();
http://jsfiddle.net/mmjW9/