|
JavaScript - Picture Coordinates
Hey guys/gals, do ya know an efficient way to get the coordinates of a pictures so that I can use them to create a map? It is a rectangle.
Here is the code I set up for a page: Code: <HTML>
<HEAD>
<TITLE>Cyrus</TITLE>
</HEAD>
<BODY BGCOLOR=black>
<div align="center">
<table border="0"; cellspacing="0"; cellpadding="0">
<tr>
<td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername.png"; width=900px; hieght=160px;></td>
</tr>
<tr>
<td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/navbar.png" width=900px; border="none" usemap="#navbar"></td>
</tr>
<tr>
<td> <br>
<br>
<table border="0"; width=900px>
<tr>
<td>
<div align="left"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"; width=466px; hieght=320px></div>
</td>
<td>
<div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/equipment.png">
<br><br>
<img src="http://i732.photobucket.com/albums/ww329/Chrishick/personality.png">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<div align="center"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/brought.png"></div></td>
</tr>
</table>
</div>
<map name="navbar">
<area shape="rect" coords="247,185,445,220" href="http://www.roleplayandwritinghaven.com/forum.htm" alt="Forum" />
</map>
</BODY>
</HTML>
Similar TutorialsCan anyone help me set coordinates for an image I want to add to my page? I have the center coords where I want it to be places x is 400 and y is 90. I've searched all over the internet trying to find a solution.
Hi, I would like to get the Lat/Lng coordinates into teh values in my form but instead I get N/E values, Can anyone please help? Here is my page: http://www.nakedsloth.com/where/default.php here is my code: Code: <?php
include_once("common.php");
$markers = mysql_query("SELECT * FROM wheremarkers1");
while($row1 = mysql_fetch_array($markers))
{
// echo 'Lat: '.$row1['rslat'];
// echo 'Long: '.$row1['rslon'];
// echo 'Email: '.$row1['rsemail'];
// echo 'Name: '.$row1['rsname'];
// echo 'Desc: '.$row1['rsdesc'];
}
// $lat = $_REQUEST['lat'];
// $lng = $_REQUEST['lng'];
// if($lat != 51.464960 && $lng != -1.40625){
// $lat = $_POST['lat'];
// $lng = $_POST['lng'];
// }
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
</head>
<style>
body{
font-family: arial;
font-size: 13px;
width:100%;
}
#container{
width:100%;
}
#mapCanvas {
width: 70%;
height: 80%;
float: left;
}
#infoPanel {
width: 400px;
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
#markerStatus { display:none; }
#info { display:none; }
#geot { display:none; }
body { font: normal 10pt Helvetica, Arial; }
ul#topmenu { height:30px; width:100%; margin-top:0px;}
ul#topmenu li { display:block; float:left; margin-right:10px; margin-top:14px; }
.telephone { display:none; }
.website { display:none; }
</style>
<body style="margin:0px; border:0px; padding:0px;">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
$( document ).ready(function() {
});
$( document ).ready(function() {
$("#rscategory").change(function(){
var id = $(this).find("option:selected").attr("id");
switch (id){
case "poi":
$(".telephone").css( "display","block" );
$(".website").css( "display","block" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
case "hiddenmsg":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
case "landmark":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
case "pub":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
break;
case "cafe":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
break;
case "GreatView":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
}
});
});
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
updateMarkerCity(responses[6].formatted_address);
updateMarkerCountry(responses[7].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
var country;
for (i=0;i<results[0].address_components.length;i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="Region")
country = results[0].address_components[i].long_name
}
}
var city;
city = results[1].address_component['rsCity']
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
latDir = "N";
lngDir = "E";
if(latLng.lat() < 0){
latDir = "S";
}
if(latLng.lng() < 0){
lngDir = "W";
}
qlat = Math.abs(latLng.lat());
ilat = Math.floor(qlat);
xlat = ((qlat - ilat)*60);
qlng = Math.abs(latLng.lng());
ilng = Math.floor(qlng);
xlng = ((qlng - ilng)*60);
xlat = Math.round(xlat*1000)/1000;
xlng = Math.round(xlng*1000)/1000;
d2 = xlat.toFixed(3);
e2 = xlng.toFixed(3);
d1 = ilat.toString();
d2 = d2.toString();
e1 = ilng.toString();
e2 = e2.toString();
n = Math.abs(latLng.lat()); // Change to positive var decimal = n - Math.floor(n)
var decimal = n - Math.floor(n);
document.getElementById('geot').innerHTML = [
latDir + ' ' + d1 + ' ' + d2,
lngDir + ' ' + e1 + ' ' + e2
].join(', ');
document.form1.rsLat.value = [
latLng.lat()];
document.form1.rsLong.value = [
latLng.lng()];
document.form1.rsLat.value = [
latDir + ' ' + d1 + ' ' + d2];
document.form1.rsLong.value = [
lngDir + ' ' + e1 + ' ' + e2];
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function updateMarkerCity(city) {
document.getElementById('city').innerHTML = city;
}
function updateMarkerCountry(country) {
document.getElementById('country').innerHTML = country;
}
function centerPosition(newgeo,newzoom) {
// document.getElementById('mcenter').innerHTML = [newgeo];
// document.getElementById('mzoom').innerHTML = [newzoom];
// document.form2.mcenter2.value = [newgeo];
// document.form2.mzoom2.value = [newzoom];
document.form1.mcenter1.value = [newgeo];
document.form1.mzoom1.value = [newzoom];
}
function initialize() {
var latLng = new google.maps.LatLng(51.507222, -0.1275);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 4,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
updateMarkerCity('');
updateMarkerCountry('');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
google.maps.event.addListener(map, 'bounds_changed', function(){
var newgeo = map.get('center');
var newzoom = map.get('zoom');
centerPosition(newgeo,newzoom);
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
<p>
<ul id="topmenu">
<li><a href="default.php">Add marker</a></li>
<li><a href="default2.php">View markers</a></li>
</ul>
<div id="container">
<div id="mapCanvas"></div>
<div id="infoPanel">
<br />
<div id="markerStatus"></div>
<div id="info"></div>
<div id="geot"></div>
<form id="form1" name="form1" action="add.php" method="post">
<input type="hidden" name="newcenter" id="mcenter1" value="mcenter1">
<input type="hidden" name="newzoom" id="mzoom1" value="mzoom1">
<input type="hidden" id="rsLat" name="rsLat" size="18"> <br />
<input type="hidden" id="rsLong" name="rsLong" size="18"> <br />
Name:
<input type="text" id="rsname" name="rsPubName"><br />
<b>Category:</b> <select id="rscategory" name="rscategory">
<option id="GreatView" value="Great View">Great view</option>
<option id="cafe" value="Cafe">Cafe</option>
<option id="pub" value="Pub">Pub</option>
<option id="restaurant" value="Restaurant">Restaurant</option>
<option id="theatre" value="Theatre">Theatre</option>
<option id="venue" value="Venue">Venue</option>
<option id="landmark" value="Landmark">Landmark</option>
<option id="poi" value="Place of Interest">Place of Interest</option>
<option id="hiddenmsg" value="Hidden Message">Hidden Message</option>
<option id="secretspot" value="Secret Spot">Secret Spot</option>
<option id="hiking" value="Hiking">Hiking</option>
<option id="hiking" value="Camping">Camping</option>
<option id="dogfriendly" value="Dog Friendly">Dog Friendly</option>
<option id="valueformoney" value="Value for money">Value for money</option>
<option id="streetview" value="Street View">Interesting street view</option>
</select>
<br />
Description:
<textarea id="desc" name="rsdesc" ></textarea>
Address:
<textarea id="address" name="rsAddress" ></textarea>
<input type="hidden" id="wlat" name="rslat" size="10"><br />
<input type="hidden" id="wlon" name="rslng" size="10"><br />
City:
<textarea id="city" name="rsTown" ></textarea><br />
<textarea id="country" name="rsCounty" ></textarea><br />
<div class="telephone">
Telephone:
<input type="text" name="rsTel">
</div>
<div class="website">
Website:
<input type="text" name="rsWebsite">
</div>
<input type="submit" name="submit" value="Pin Your Location">
</form>
<br /><br />
<!--
<b>Current map center:</b>
<div id="mcenter"></div>
<div style="float:left;"><b>Current map zoom level: </b></div><div id="mzoom" style="float:left;"></div>
<div style="clear:both;"></div>
-->
<!--
<form id="form2" name="form2" method="post" action="center.php">
<input type="hidden" name="newcenter" id="mcenter2" value="mcenter2">
<input type="hidden" name="newzoom" id="mzoom2" value="mzoom2">
<input type="submit" name="submit" value="Center Marker On Map">
</form>
<div style="width:300px; font-size:10pt; color:#999; text-align:justify;">'Center Marker On Map' ... This uses cookies to remember location and zoom level.</div>
-->
</div>
</div>
</p>
</div>
</div> <!-- /container -->
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Hi Guys. Trying to pass variables from the javascript into my php script and into my SQL query so i can track the location of the iphone. So far i have... Code: <script type="text/javascript">
function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGPS, gpsError);
} else {
gpsText.innerText = "No GPS Functionality.";
}
}
long = position.coords.longitude;
lat = position.coords.latitude;
function gpsError(error) {
alert("GPS Error: "+error.code+", "+error.message);
}
function showGPS(position) {
gpsText.innerHTML = "<?php $long = "".$_GET['long'].""; $lat = "".$_GET['lat'].""; $sqldel = "INSERT INTO `location` (`id` ,`user_id` ,`long` ,`lat`) VALUES (NULL , '$user', '$long','$lat' );"; mysql_query($sqldel) or die(mysql_error()); echo "$long"; echo "$lat"; ?>";
}
</script>
This gets the coordinates in javascript and the php runs and i get a new record in the database but it doesnt pass the variables from java to php. Anyone know a workaround to get the variables from the iphone to sql on a single page? I want this to run in the background and refresh every now and then so i can track users location. thanks. Adam. Hi everyone In this snippet the addresses stored in address[] is geocoded using google maps API. The problem comes when i try to pass these values on to the array flightPlanCoordinates to create a polyline. Nothing happens. Can anyone tell me why? PS. Im quite new to JS Code: var flightPlanCoordinates = [];
for ( var i=0, len=address.length; i<len; ++i ){
geocoder.geocode( { 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
flightPlanCoordinates.push(
new google.maps.LatLng(
parseFloat(results[0].geometry.location.lat()),
parseFloat(results[0].geometry.location.lng())
)
);
}
});
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#000000",
strokeOpacity: 1.0,
strokeWeight: 3
});
flightPath.setMap(map);
Hello, I'm more looking for advice but any helpful examples would be great. So basically what I need to accomplish is a grid, that I can drop objects into, then save the coordinates. So let's say I have a 3x3 set of tiles which will represent "floor tiles", and I load from my MySql database a users "furniture", what's the best method of being able to take these dynamic items drop them on a tile which can be then saved in an xml file or something. What are the best j/s libraries for this? I know jQuery and mootools have drag and drop functions but can they accomplish what I'm looking for? Any feedback will help, I'm comfortable coding in js but I want to do it effeciently and there's got to be people who have done similar things. I search through the forums and google but didn't find anything on this, but I was wondering if anyone was having or has had issues with google maps changing their lat/long coordinates, even when a frozen version is declared? Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> In the geocoding portion: Code: geocoder.geocode({'address': query}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var coordinates = results[0].geometry.location;
point.latitude = coordinates['oa'];
point.longitude = coordinates['pa'];
return callback();
} else {
var error = new Object();
error.message = 'We were unable to locate your latitude and longitude. Please check your address and try again.<br />';
error.callback = function(){};
return point.errorHandler(error);
}
});
The coordinates variable keeps changing the key. Originally it was: Code: point.latitude = coordinates['xa']; point.longitude = coordinates['ya']; Then: (and several others) Code: point.latitude = coordinates['sa']; point.longitude = coordinates['ta']; Now: Code: point.latitude = coordinates['oa']; point.longitude = coordinates['pa']; Why if a frozen version is declared, is this still changing? This is what my code is supposed to do: 1. create a select list that changes the photo showing, (which I have) 2. create script so that when the user hovers over the image it shows a div 3. when the users mouse is off the image/div shows the coordinates where it last left 4. on mouseout hides the div again (this is the part I'm stuck on) This is my html: Code: <style>
#selectdiv
{
position:absolute;
left:10px;
top:10px;
width:400px;
height:400px;
}
#mylist
{
position: absolute;
left: 200px;
top: 100px;
width:inherit;
height:inherit;
}
#myyellow
{
position: absolute;
left: 600px;
top: 100px;
width:300px;
height:200px;
background-color:#FF3;
}
</style>
<body>
<div id="selectdiv">
<h1 style="font-size:28px">Select a Beatle</h1>
<select name="beatles" size="1" id="myselect" onchange="showDiv();">
<option value="-">-</option>
<option value="J">John</option>
<option value="P">Paul</option>
<option value="G">George</option>
<option value="R">Ringo</option>
</select>
</div>
<div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
<div id="John" style="display:none">
<img src="beatles_john.jpg" />
</div>
<div id="Paul" style="display:none">
<img src="beatles_paul.jpg" />
</div>
<div id="George" style="display:none">
<img src="beatles_george.jpg" />
</div>
<div id="Ringo" style="display:none">
<img src="beatles_ringo.jpg" />
</div>
<div id="myyellow" style="display:none"></div>
<div id="msg"></div>
</body>
This is my script: Code: function showDiv()
{
var mySelect = document.getElementById("myselect");
var myList = document.getElementById("mylist");
switch (mySelect.value)
{
case 'J':
myDiv = document.getElementById("John");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'P':
myDiv = document.getElementById("Paul");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'G':
myDiv = document.getElementById("George");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'R':
myDiv = document.getElementById("Ringo");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
}
}
function showYellow(event)
{
var myyellow = document.getElementById("myyellow");
myyellow.style.display = "block";
}
function showpixels(event)
{
x=event.clientX
y=event.clientY
var myMsg = document.getElementById("msg");
myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
}
Any feed back is greatly appreciated. Hi all, I have a div element (i.e. <div id="main">) that contains a number of links, each with white background colors and its top and left style properties set to different values. I need to do several things with the anchors when they are clicked: When a white anchor is clicked, its background color is turned yellow and its coordinates (top and left style property values) are added to an array. The coordinates for a single anchor is to be separated by a hyphen; coordinates for multiple anchors are to be separated by a comma (eg. "0-9,0-18") When a yellow anchor is clicked, its background color is turned white and its coordinates are removed from the array. The values in the array are to be the value for a hidden input element, all separated by commas. I'm a Javascript novice and don't know where to begin. Can someone help me with this? Thanks in advance, Dude-Dastic Hi guys, Hopefully a really quick question. I'm a JS novice, and am looking for a way to output the coordinates of a Google maps marker into the value of two text fields, one for latitude and one for longitude. The code below is a simple location search which returns a result with a draggable marker. Currently, the coordinates in both text fields update when the location search is performed, but not when the marker is dragged to a new location afterwards. Does anyone know the code to simply update the coordinates each time the marker is dropped on a new location? Code: <html>
<head>
<style type="text/css">
#map_canvas {
width:444px;
height:444px;
overflow:hidden;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA-Kl-tQOj5PlnOlXQmp2N9hTg6Fn61x9hOlvMvn6kV4ENK8yRfBShRuj-nulocuk2Alx9JmFKKV4zwA" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(52.8068752, -1.6430344),6);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
geocoder = new GClientGeocoder();
// Update current position info
}
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Whoops, we couldn't find that address!");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point,{draggable:true});
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br /><span class="smallgrey">Zoom in and drag the marker to exactly where the point is</span>');
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
}
}
// showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a marker to the map at that location.
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
</script>
</head>
<body onload="initialize()">
<form action="#" onsubmit="showLocation(); return false;"><input type="text" name="q" size="35" /> <input type="submit" name="find" value="Search"/></form>
<div id="map_canvas">And pin the <strike>tail</strike> marker on the <strike>donkey</strike> map:<br /></div>
Latitude: <input class="required" type="text" name="latitude" id="latitude" value="53.34870686020199" /> <br />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-6.267356872558594" />
</body>
</html>
Many thanks in advance, I appreciate anyone who wants to help out! How can you have a smaller version of a picture and when you click on it a bigger version pops up? Is this easily possible with JS? I have been working on a picture slideshow w/ a caption, and (due to being an extreme amateur) I cannot get it to work just right. I have the slideshow going, but I can't get the caption to stay on the right side of the photo, while keeping the layout fluid. I would also love to add a pause, forward, and back button, and I have tried several free slideshow generators but either they don't work or they don't produce what I'm after. Here is my code so far. Javascript: Code: <script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
// and: http://www.codingforums.com/showthread.php?t=195033
var ImgPtr = -1; // -1 for first pass only
var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [ // format: ['imageName','Comments about image']
['pinto-1.jpg',
'<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'],
['shedding.jpg',
'<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster. <i>Written by Cassidy Deardorff.</i>'],
['dewormer-1.jpg',
'<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly. <i>Written by Cassidy Deardorff.</i>']
// Note: No comma after last entry
];
var intervalAction;
function ShowSlide(slide_num) {
document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
document.getElementById('mypic').alt = ImgArray[slide_num][1];
document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}
function slideshow() {
ImgPtr++;
ImgPtr = ImgPtr % ImgArray.length;
// document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
ShowSlide(ImgPtr);
}
onload = function() {
slideshow();
intervalAction = setInterval("slideshow()",5000);
}
</script>
HTML: Code: <div style="height:300px;width:398px;"> <div id="divCaption"> <div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div> <img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398"> </div><br /> </div> I would LOVE for the finished slideshow to look somewhat like the one on this website: http://www.equisearch.com/ but I know this is a lot to ask Thanks so much in advance!!! im noob and suck at javascript but i do make webdesign html+css and i realy liked script from this page: http://acidtests.googletoad.com/ when user hovers over image it zooms, when it moves away it zooms out the code is this: Code: <SCRIPT language="javascript" type="text/javascript">
<!--
function setZoom(img, dir, width, height, margin, zIndex, delay, position)
{
window.setTimeout(function(){
if (img.dir==dir){
img.style.width = width;
img.style.height = height;
img.style.margin = margin;
img.style.zIndex = zIndex;
}
}, delay);
}
function imgLarger(img) {
img.dir = "rtl";
img.style.position = "absolute";
var width = 200;
var height = 150;
var now = parseInt(img.style.zIndex);
if (img.style.left=="" && bChrome==false){
img.style.left = img.offsetLeft - 50;
img.style.top = img.offsetTop;
}
if (isNaN(now)) { now=0; }
for (i=now+1; i<=10; i++) {
var w = (width * (10+i))/20 + "px";
var h = (height* (10+i))/20 + "px";
var m = (-i) + "px 0 0 " + (-width*i/40) + "px";
setZoom(img, "rtl", w, h, m, i, 20*(i-now));
}
}
function imgSmaller(img) {
img.dir = "ltr";
img.style.position = "absolute";
var width = 200;
var height = 150;
var now = parseInt(img.style.zIndex);
if (isNaN(now)) { now=0; }
for (i=now-1; i>=0; i--) {
var w = (width * (10+i))/20 + "px";
var h = (height* (10+i))/20 + "px";
var m = (-i) + "px 0 0 " + (-width*i/40) + "px";
setZoom(img, "ltr", w, h, m, i, 20*(now-i));
}
}
function openImage(imagePath){
//Shadow
var oFade = getObject("DIV", "lightbox_fade");
oFade.style.display = "block";
oFade.style.height = document.body.scrollHeight;
//Embed it
var oContent = getObject("DIV", "lightbox_content");
oContent.style.width = 512;
oContent.style.height = 384;
oContent.style.top = (screen.height-384)/2 + (document.body.scrollTop - 100);
oContent.style.left = (screen.width -512)/2;
oContent.style.display = "block";
oContent.innerHTML = "<CENTER><IMG src=" + imagePath + "></CENTER>";
}
function closeImage(){
//Shadow
var oFade = getObject("DIV", "lightbox_fade");
oFade.style.display = "none";
//Embed it
var oContent = getObject("DIV", "lightbox_content");
oContent.style.display = "none";
}
// -->
</SCRIPT>
Code: <DIV id="lightbox_fade" class="overlay" onClick="JavaScript:closeImage();"></DIV>
<DIV id="lightbox_content" class="content" onClick="JavaScript:closeImage();"></DIV>
<a href="JavaScript:openImage('picture/large.png');">
<IMG src="picture/small.png" alt="" width="212" height="157" border="0" onmouseover="JavaScript:imgLarger(this)" onmouseout="JavaScript:imgSmaller(this);"></a>
now i dont know if people here help with taken scripts but if you do, i would apreciate alot if someone could explain how to change location of appeared image (if possible not to be fixed to 1 location but to work from place where image is inserted on html page) because obviously it was set to be always on far right cheers I'm trying to disable my record navigation pictures when they get to the end of a calendar (events are posted on days, and navigation goes to the next or previous one). Code: <a onclick="javascript:previousEvent();">
<input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
<a onclick="javascript:nextEvent();">
<input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>
This is where I have to disable the pictures. Above in my JS I would like to have a handler that could disable them when they are at the end of the index, or at the beginning. Thanks! edit: I do have the logic already, just not sure how to disable the images. Code: function nextEvent(i) {
if (index == maxIndex || index >= maxIndex) {
//disable next button
tempObj = document.getElementsByName("next");
tempObj.visible = false;
}
else {
index = index + 1;
eventSelected(rawDates[index]);
}
For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have: <script> click=1 function swap(What input do I need? the img src?){ if (click==1){ var1=imgsrc click=2 } else{ var2=imgsrc //then switch them so: x=var1 var1=var2 var2=x click=1 } } </script> So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there) Code:
<script>
var change = new Array
change [0] = [0,0,0,0,0];
change [1] = [0,0,0,0,0];
change [2] = ["",0];
change [3] = [0,0,0,0,0];
function equipaa(){
change [0][0] = 1
change [0][4] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipab(){
change [0][1] = 1
change [0][0] = 0
change [0][4] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipac(){
change [0][2] = 1
change [0][0] = 0
change [0][1] = 0
change [0][4] = 0
change [0][3] = 0
changea();
}
function equipad(){
change [0][3] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][4] = 0
changea();
}
function equipae(){
change [0][4] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipba(){
change [1][0] = 1
change [1][4] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function equipbb(){
change [1][1] = 1
change [1][0] = 0
change [1][2] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbc(){
change [1][2] = 1
change [1][0] = 0
change [1][1] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbd(){
change [1][3] = 1
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
changefinal();
}
function equipbe(){
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function changea(){
if(change [0] [0] = 1){
change [2] [0] = document.getElementById("is1i").src;
change [2] [1] = change [3] [0];
}
else if(change [0] [1] = 1){
change [2] [0] = document.getElementById("is2i").src;
change [2] [1] = change [3] [1];
}
else if(change [0] [2] = 1){
change [2] [0] = document.getElementById("is3i").src;
change [2] [1] = change [3] [2];
}
else if(change [0] [3] = 1){
change [2] [0] = document.getElementById("is4i").src;
change [2] [1] = change [3] [3];
}
else if(change [0] [4] = 1){
change [2] [0] = document.getElementById("is5i").src;
change [2] [1] = change [3] [4];
}
}
function changefinal(){
if(change [1] [0] = 1){
document.getElementById("i1").src = change [2] [0];
}
else if(change [1] [1] = 1){
document.getElementById("i2").src = change [2] [0];
}
else if(change [1] [2] = 1){
document.getElementById("i3").src = change [2] [0];
}
else if(change [1] [3] = 1){
document.getElementById("i4").src = change [2] [0];
}
else if(change [1] [4] = 1){
document.getElementById("i5").src = change [2] [0];
}
clear();
}
function clear(){
change [0] [0] = 0;
change [0] [1] = 0;
change [0] [2] = 0;
change [0] [3] = 0;
change [0] [4] = 0;
change [1] [0] = 0;
change [1] [1] = 0;
change [1] [2] = 0;
change [1] [3] = 0;
change [1] [4] = 0;
}
</script>
<html>
<body>
<table border="0">
<tr>
<td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
</tr>
</table>
<div id="invent">
<table border="o">
<tr>
<td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is1n"></div></td>
<td><div id="is1d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is2n"></div></td>
<td><div id="is2d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is3n"></div></td>
<td><div id="is3d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropd()" onclick="equipad();"><img id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is4n"></div></td>
<td><div id="is4d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="drope()" onclick="equipae();"><img id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is5n"></div></td>
<td><div id="is5d"></div></td>
<td></td>
</tr>
</table>
</body>
</html>
how can I write on a picture with javascript? Hi Everyone, I have created 8 thumbnails of their larger full sized pictures. Next I created a "picdiv" with CSS attributes within a center division. The thumbnails sit just above the "picdiv". I need code to open the full pictures in the "picdiv" when I click on the thumbnail. I've tried an on-click function but can't get this working either. Can anyone help please? Anita |
|||||||