|
JavaScript - Showing Images
i've been having some trouble with showing images and i think it's a problem with the image source, i would like to know how i must alter my code to fix this thnx.
i should also point out that the images are the 6 sides of a dice Code: <html>
<head>
<title>My Script</title>
<script type = "text/javascript">
if (document.images)
{
image1 = new Image(10,10);
image1.source = "d1.gif";
image2 = new Image(10,10);
image2.source = "d2.gif";
image3 = new Image(10,10);
image3.source = "d3.gif";
image4 = new Image(10,10);
image4.source = "d4.gif";
image5 = new Image(10,10);
image5.source = "d5.gif";
image6 = new Image(10,10);
image6.source = "d6.gif";
}
alert(image1);
alert(image2);
alert(image3);
alert(image4);
alert(image5);
alert(image6);
</script>
</head>
<body>
</body>
</html>
Similar TutorialsI'm trying to show random images with a timer of 3 seconds. I'm still learning this (starting to :s) Any help will be highly appreciated. The code: Code: <script type="text/javascript">
var imagenRandom;
var imagenSrc;
var i;
function imagenAzar(){
imagenRandom = Math.floor(Math.random()*222);
imagenRandom++;
imagenSrc = "imagenes/fd/"+imagenRandom+".jpg";
document.getElementById('imagenSlideShow').src=imagenSrc;
}
function imagenAzarLoop(){
i=0;
while (i<=221) {
setTimeout("imagenAzar()", 3000);
i++;
}
}
</script>
</head>
<body onload="imagenAzarLoop()">
<img src="imagenes/fd/1.jpg" id="imagenSlideShow" width="300" height="225" alt="Imagen" title="Imagen" />
Hi On the following URL on the iphone and Ipad the jqzoom script is showing the enlarged image on the left but works fine in IE, Chrome, Firefox etc. The script in use is jqzoom. http://tinyurl.com/bwcxf8c Any idea welcome. Thanks Roy Posted this in the wrong forum earlier. I'm pretty new to Java, so i may be missing something simple, but here is my problem; On this page http://keithfrenchdesigns.com/ under the work area the gallery images are showing no problem, but on the sideways scrolling page http://keithfrenchdesigns.com/sideways on page 4 it's not showing the gallery image like the div is missing(it's not), but if you click on one of the links it will pull up a blank. It also will not scroll past page 4 to page 5(or if you move the gallery area to say, page 2, it won't scroll any further either). Like the script for the gallery area is interfering with the sideways scrolling script. Please ignore the design on the site as it is just there so i can see how everything reads. Any help would be appreciated. I am trying to set up a jQuery carousel on my home page. I want it to operate by mouse - also auto scrolling, be horizontal, be circular, show one image at once. I currently have three images to show one at a time in a containing div. All three images are showing together. One is in the container, in the right place, two others are shown below it. These two should be hidden in the carousel. The carousel itself, does not work. Please can anyone tell me what I am doing wrong?! I would like to keep, at least some, of my hair! Here is my code in the head; Code: <link rel="stylesheet" type="text/css" href="css/deestyle.css" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<!-- Optional -->
<script type="text/javascript" src="js/mousewheel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$(".carousel").jCarouselLite({
mouseWheel: true,
auto: 800,
speed: 500,
vertical: false,
circular: true,
visible: 1
});
});
});
</script>
This is the code in the body;
<div class="carousel">
<ul id="slides">
<li><img src="images/imagered.jpg" alt="" width="650" height="350" ></li>
<li><img src="images/imageblue.jpg" alt="" width="650" height="350" ></li>
<li><img src="images/imagegreen.jpg" alt="" width="650" height="350" ></li>
</ul>
</div>
Here is the CSS code;
.carousel {
position: absolute;
top: 200px;
right: 0px;
width: 650px;
height: 350px;
margin: 0px;
padding: 0px;
border: 1px solid #00ff00;
}
#slides {
list-style-type:none;
float: left;
padding: 0;
margin: 0;
}
Big thank you's for any help, in advance Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Hey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. Please help have a look at the scripts... Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out? I've wanted to make the image disappear shortly before a new image is loaded. I've worked on this and played around with the scripts, yet no finding... Please do tell me if you know the answer to it. Thanks. Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
}
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
var o = 100;
var t;
var p = 0;
var f = 1;
function nextImageFading(){
t = setInterval(
function(){
pic.src = img[p];
pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;
if(o<=0){
clearInterval(t);
if(p<img.length-1){
p = p+1;
}
else {p=0;}
pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;
o = 100;
}
},f);
}
</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>
i am having some problem showing and hiding some div i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option. Code: function Show (titleImg){
// the id of the content element from the id of the title element
var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById (contentID);
contentDiv.style.display = "block";
return false;
}
function Hide (titleImg){
// the id of the content element from the id of the title element
var contentID = titleImg.id.replace (/title/, "content");
var contentDiv = document.getElementById (contentID);
contentDiv.style.display = "none";
return false;
}
the functions work fine i have tested them on input type="checkbox" and they work fine Code: <select name="education" id="education" onfocus="Show(this.options[this.selectedIndex].value);"> <option selected value="00">-الرجاء الاختيار-</option> <option value="highSchoolsDiv">مدرسة ثانوية</option> <option value="universitiesDiv"> كلية </option> <option value="universitiesDiv">درجة البكالوريوس</option> <option value="universitiesDiv">درجة عليا</option> <option value="universitiesDiv">دكتوراه / ما بعد الدكتوراه</option> <option value="07">اسألني فيما بعد</option> </select> </span> </div> </td></tr></table> </div> <div> <div class="Left"></div> <table class="step2" ><tr><td> <div class="Right"> <div class="Inner" id="Inner"> <div id="universitiesDiv" class="Row innerError" style="display:none;"> <div class="Left"> <label for="universities">الجامعة / الكلية</label></div> <div class="Right"> <input type="text" name="universities" id="universities" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_universities();" onblur="blurInput(this); validate_JoinPersonalInfoForm_universities();" size="55"/> </div> </td></tr><tr><td> </div> <div id="highSchoolsDiv" class="Row innerError" style="display:none;"> <div class="Left"> <label for="high_schools">المدرسة الثانوية</label></div> <div class="Right"> <input type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_high_schools();" onblur="blurInput(this); validate_JoinPersonalInfoForm_high_schools();" size="55"/> </div> </div> </div> </div> </td></tr></table> </div> here is doesn't do nothing i have tried onblur onfocus onchange onselect everything i even tried then in side the option <option onselect... !!!!! anyone can help me, that would be great thanks I am supposed to create a calendar and have the calendar show up in the top right of the screen while also highlighting the current date set on it. Nothing shows up... HTM: Code: <?xml version="1.0" encoding="UTF-8" ?>
<!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">
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
The Chamberlain Civic Center
Author:
Date:
Filename: ccc.htm
Supporting files: back.jpg, calendar.css, calendar.js, ccc.css, ccc.jpg, logo.gif
-->
<title>The Chamberlain Civic Center</title>
<link href="ccc.css" rel="stylesheet" type="text/css" />
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="head">
<script type="text/javascript">
calendar("March 25, 2011");
</script>
<img src="ccc.jpg" alt="Chamberlain Civic Center" />
</div>
<div id="links">
<table><tr>
<td><a href="#">Home</a></td><td><a href="#">Tickets</a></td>
<td><a href="#">Events</a></td><td><a href="#">Tour</a></td>
<td><a href="#">Directions</a></td><td><a href="#">Hours</a></td>
<td><a href="#">Packages</a></td><td><a href="#">Contact Us</a></td>
</tr></table>
</div>
<div id="main">
<p id="firstp"><img src="photo.jpg" alt="" />March is another banner month
at the Chamberlain Civic Center, with performances of the award-winning
musical, <span>The Producers</span> by the Broadway Touring Company on
March 4, 5, and 6. Tickets are going fast, so order yours today.</p>
<p>Celebrate the season on March 11 with the Chamberlain Symphony and their
special selection of classical music with Spring themes. The next day,
March 12, exercise your mind by attending the Charles Dickens mystery
<span>Edwin Drood</span>.</p>
<p>Jazz lovers have a lot to celebrate in March with a visit from <span>The
Jazz Masters</span> on the 17th. Then on March 24, enjoy the music of The
Duke with <span>An Ellington Tribute</span> performed by the Jazz Company
of Kansas City.</p>
<p>Pins, bottles, plates, and chairs are flying at the Chamberlain Civic
Center in March. <span>The Taiwan Acrobats</span> return with another
amazing performance on Sunday, March 13. On March 20, the <span>Madtown
Jugglers</span> get into the act with their unique blend of comedy, juggling,
and madness.</p>
<p>Enjoy a classical brunch every Sunday afternoon with music provided by the
Carson Quartet. Seating is limited, so please reserve your table.</p>
</div>
<address>
The Chamberlain Civic Center ·
2011 Canyon Drive ·
Chamberlain, SD 57325 ·
(800) 555-8741
</address>
</body>
</html>
Java Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Author:
Date:
Function List:
calendar(calendarDay)
Creates the calendar table for the month specified in the
calendarDay parameter. The current date is highlighted in
the table.
writeCalTitle(calendarDay)
Writes the title row in the calendar table
writeDayTitle()
Writes the weekday title rows in the calendar table
daysInMonth(calendarDay)
Returns the number of days in the month from calendarDay
writeCalDays(calendarDay)
Writes the daily rows in the calendar table, highlighting
calendarDay
*/
function calendar(calendarDay) {
if (calendarDay == null) calDate=new Date()
else calDate = new Date(calendarDay);
document.write("<table id='calendar_table'>");
writeCalTitle(calDate);
writeDayNames();
writeCalDays(calDate);
document.write("</table>");
}
function writeCalTitle(calendarDay) {
var monthName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "Octoboer", "November", "December");
var thisMonth=calendarDay.getMonth();
var thisYear=calendarDay.getFullYear();
document.write("<tr>");
document.write("<th id='calendar_head' colspan='7'>");
document.write(monthName[thisMonth]+" "+thisYear);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
document.write("<tr>");
for (var i=0; i < dayName.length; i++) {
document.write("<th class='calendar_weekdays'> "+dayName[i]+"</th>");
}
document.write("</tr>");
}
function daysInMonth(calendarDay) {
var thisYear = calendarDay.getFullYear();
var thisMonth = calendarDay.getMonth();
var dayCount = new Array (31,28,31,30,31,30,31,31,30,31,30,31);
if (thisYear % 4 == 0) {
if ((thisYear % 100 != 0) || (thisYear % 400 == 0)) {
dayCount[1] = 29;
}
}
return dayCount[thisMonth];
}
function writeCalDays(calendarDay) {
var currentDay = calendarDay.getDate();
var dayCount = 1;
var totalDays = daysInMonth(calendarDay);
calendarDay.setDate(1);
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i=0; i < weekDay; i++) {
document.write("<td></td>");
}
while (dayCount <= totalDays) {
if (weekDay == 0) document.write("<tr>");
if (dayCount == currentDay) {
document.write("<td class='calendar_dates' id='calendar_today'>"+dayCount+"</td>");
} else {
document.write("<td class='calendar_dates'>"+dayCount+"</td>");
}
if (weekDay == 6) document.write("</tr>");
dayCount++;
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
}
document.write("</tr>");
}
CSS (calendar) Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Filename: calendar.css
This file contains styles applied to the calendar table
*/
#calendar_table {float: right; background-color: white; font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
border-style: outset; border-width: 5px; margin: 0px 0px 5px 5px}
#calendar_head {background-color: rgb(223,29,29); color: ivory; letter-spacing: 2px}
.calendar_weekdays {width: 30px; font-size: 10pt; border-bottom-style: solid}
.calendar_dates {text-align: center; background-color: white}
#calendar_today {font-weight: bold; color: rgb(223,29,29); background-color: ivory;
border: 1px solid black}
CSS (page) Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Filename: ccc.css
This file contains styles used in the ccc.htm file
*/
body {margin: 0px; background: white url(back.jpg) repeat-y scroll 820px 0px}
#head {width: 750px; height: 150px; padding: 5px}
#links {clear: right; width: 750px; padding: 0px}
#links table {width: 750px; font-family: Arial, Helvetica, sans-serif;
font-size: 8pt; margin: 0px}
#links table td {text-align: center; background-color: white;
border: 1px solid black; letter-spacing: 5; padding: 2px}
#links table a {text-decoration: none; color: rgb(223,29,29); width: 100%}
#links table a:hover {color: white; background-color: rgb(223,29,29)}
#main {width: 750px; font-family: Arial, Helvetica, sans-serif; padding: 10px}
#main p {text-align: justify; font-size: 9pt}
#firstp:first-line {font-variant: small-caps}
#main img {float: right; margin: 0px 0px 10px 10px}
#main p span {color: rgb(223,29,29)}
address {width: 750px; font-size: 8pt; font-style: normal; color: rgb(223,29,29);
font-family: Arial, Helvetica, sans-serif; text-align: center;
border-top: 1px solid rgb(223,29,29); padding-bottom: 10px}
Can anyone see something wrong? This is really frustrating me as I'm not very good with javascript but thought I did this one right... thanks this problem has been solved
Hi, I have the following codes but my checkbox is not appearing. The values of the checkbox do print out in the alert. Can anyone tell me what is wrong with it? Thank you! Code: var table = document.getElementById('maintable');
var i; // iterator
var item; // pointer to item in received list
for(i = 0;
(item = contacts.ReturnValue.getNext()) != undefined;
++i) {
table.insertRow(i + 1);
var result = "<td>";
if(item.FirstName != undefined) {
result += item.FirstName.Value;
}
result += "</td><td>";
if(item.LastName != undefined) {
result += item.LastName.Value;
}
result += "</td><td>";
if(item.MobilePhoneGen != undefined) {
result += item.MobilePhoneGen.Value;
}
result += "</td><td>";
if(item.EmailGen != undefined) {
result += item.EmailGen.Value;
}
var td1 = document.createElement("td");
var chkbox = document.createElement('input');
chkbox.type='Checkbox';
table.rows[i + 1].innerHTML = result;
chkbox.value=item.MobilePhoneGen.Value;
td1.appendChild(chkbox);
alert(chkbox.value);
}
The alert at the top of this function will not show... Code: function getXmlHttpRequestObject() {
alert("HTTP XML REQUEST!");
var httpxml;
if (window.XMLHttpRequest)
{
// code decent browsers like Firefox, Chrome, Opera, Safari. And IE7+...
httpxml = new XMLHttpRequest();
return httpxml;
}
else {
if (window.ActiveXObject) {
//Code for crap like IE
httpxml = new ActiveXObject('Microsoft.XMLHTTP');
return httpxml;
}
else {
httpxml = null;
}
}
if (httpxml == null) {
document.getElementById('p_status').innerHTML = "Status: Could not create XmlHttpRequest Object,
please upgrade your browser!";
return null;
}
else {
return httpxml;
}
Hey everyone Okay so... I'm working on a site, which will include a registration form for users that wish to register. In this registration form I would like it to have an AJAX based effect, such that when the user types each letter out for his username in the field, his username will appear (letter upon letter) itself below, at the end of their unique url. To explain further:- Say I type my username to be Owen Below the field I would like it to display: http://www.mydomain.com/Owen http://Owen.mydomain.com/ As I type it. Is this possible? I've done my research, but had little luck. I'm sure it is possible as I've seen it before in a slightly different manner. Hope you can or are willing to help Thank you Owen Ayres Hi, I have a form with text boxes which I need to display values ie. <input type="text" name="image_ref" value="image1" /> This works no porblem until I enter the below javscript onto the page: <script type="text/javascript"> var level1 = document.getElementById('level1'); level1.style.display = 'none'; var level2 = document.getElementById('level2'); level2.style.display = 'none'; var all_levels = document.getElementById('all_levels'); all_levels.style.display = 'none'; </script> This code is to hide certain parts of the form until they are activated. the problem is when the parts of the form are activated and displayed, the values inthe text input boxes do not show. Any ideas why this is? many thanks in advance. Hello guys, so i have a problem. i have a css/div box, and i have a login form. what im tryn to do is make it so that when i login, it it takes whats in the action of the form and shows it in the div box. the div box is like one of those cool popup boxes, it's done by using javascript and css. anyway, the div box works. the login form works. i just haven't been able to figure out how to get it to appear in the div instead of into a new page. so if any1 can help that would be much appreciated! here's my code: Code: <head><link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="popup.css" /></head>
<form name="Login" method="post" action="login/check.php">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Username:</td>
<td>Password:</td>
</tr>
<tr>
<td><input name="myusername" type="text" class="txt" id="myusername"></td>
<td><input name="mypassword" type="password" class="txt" id="mypassword"></td>
<td><input type="submit" class="btn" name="Submit" value="Login" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' "></td></tr>
</table>
</form>
<div id='PopUp'>
<br />
<div id="close">
<a id="link"
onmouseover='this.style.cursor="pointer"'
onfocus='this.blur();'
onclick="document.getElementById('PopUp').style.display = 'none'">
<span id="span">Close</span></a>
</div>
</div>
hi, on my website: http://zend.warrencreative.com/gemini-group/index.html the carousel on the right is not showing unless you hover your mouse over?! Can some one please help? I am using : http://www.twospy.com/galleriffic/ Fixed.
Not sure if I'm in the right category, apologies if I am not.. I have a small flash/javascript streaming mp3 player on my site that works fine in Chrome and Safari, but doesn't show up at all in Firefox, IE, or Opera. the site is he www.thehordeandtheharem.com/index2.html the player is in the top left corner. I don't even know where to begin troubleshooting this as I didn't write the player myself, but copied it from another site. If anyone could shed any light on this for me I would be very grateful, thanks! I have 1 html page and 1 flash object on it when i click on that flash object than a image should b appear and flash object will hide when i click on that image than flash object should b appear and image will hide the page should b same no other pages can i do this using javascript? if yes than please send the code |
|||||||