|
JavaScript - Div Moveable By Mouse. Sometimes Moves Only Picture
Hi, I have a problem with a small div of mine, namely:
Code: <div id="mui" class="disk" onmousedown="mouse_down(event, 'mui');" onMouseUp="mouse_up()"> <div id="mui_image"></div> <div>MUI</div> </div> I am using some javascript to move it and the first time I press down the mousebutton on it and move around, it works fine! Usually if I release the mouse button and then hold it down again on the same div to continue moving.. Then instead I select the div with id="mui_image" instead, so that one gets dragged away just as if you select some text and drag it. My div just stay put then. If I instead were to move it once, then click outside the div, and then try to move the div again, everything works like a charm. How to solve this problem? Oh yeah, only try it in FF, works even worse in Safari. Code: <html>
<head>
<script src="geut.js">
</script>
<style type="text/css">
body
{
margin: 0px;
margin-top: 13px;
padding: 0;
font-family: georgia, times, "times new roman", serif;
font-size: 12;
color: #000;
background-color: #959595;
overflow: hidden;
}
p
{
margin: 0;
padding: 0;
}
img
{
margin: 0;
padding: 0;
display: inline;
}
#mui
{
position: absolute;
left: 850px;
top: 110px;
}
#mui_image
{
width: 43px;
height: 23px;
background-image:url(disk_up.png);
background-repeat: no-repeat;
background-position: relative;
}
.disk
{
text-align: center;
height: 63;
width: 50;
}
</style>
</head>
<body onload="resizeMainWindow()" onmousemove="mousemove(event)">
X: <span id="X-coord"></span><br>
Y: <span id="Y-coord"></span><br>
Message : <span id="message"></span><br>
Diverse: <span id="diverse"></span>
<div id="mui" class="disk" onmousedown="mouse_down(event, 'mui');" onMouseUp="mouse_up()">
<div id="mui_image"></div>
<div>MUI</div>
</div>
</body>
</html>
Code: var x;
var y;
var xcor=0;
var ycor=0;
var xcor_old=0;
var ycor_old=0;
var being_dragged = false;
var element;
function mousemove(event) {
if(event.offsetX || event.offsetY) { //For Internet Explorer
x=event.offsetX +xcor;
y=event.offsetY +ycor;
}
else { //For FireFox
x=event.pageX +xcor;
y=event.pageY +ycor;
}
document.getElementById('X-coord').innerHTML = x +'px';
document.getElementById('Y-coord').innerHTML = y +'px';
if(being_dragged == true) { //
if((y > 14)) {
document.getElementById(element).style.top = y +'px'; //
} else {
document.getElementById(element).style.top = 14;
}
document.getElementById(element).style.left = x +'px'; //
} //
}
function mouse_down(event, ele_name) {
if(being_dragged)
return;
being_dragged = true;
element = ele_name;
if((document.getElementById(ele_name).offsetLeft - x) != 0) {
document.getElementById('message').innerHTML = "ms !=0)" +document.getElementById(element).offsetLeft + "||" +(document.getElementById(element).offsetLeft - x);
xcor = document.getElementById(element).offsetLeft - x;
ycor = document.getElementById(element).offsetTop - y;
} else {
xcor = xcor_old;
ycor = ycor_old;
}
document.getElementById(element).style.cursor = 'move';
document.getElementById('X-coord').innerHTML = x +'px' + xcor;
document.getElementById('Y-coord').innerHTML = y +'px' + ycor;
x=event.pageX +xcor;
y=event.pageY +ycor;
}
function mouse_up() {
if(being_dragged) {
being_dragged = false;
document.getElementById(element).style.cursor = 'auto';
document.getElementById(element).style.top = y +'px';
document.getElementById(element).style.left = x +'px';
xcor_old = xcor;
ycor_old = ycor;
xcor = 0;
ycor = 0;
}
}
Similar TutorialsHi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 Open this in FF. http://agrozoo.net/jsp/statistics_ag...on=11000,11100 Note check box in left vertical column, at top, encapsuled between a and b, click, click, click. That is what it should do. Open in IE, clicking same thing, nothing happens. The recipe for anything to happen is: 1. refresh 2. check the check box encapsuled between a and b 3. Click first checkbox to the right Getting nowhere here, as far as I see IE reports no js errors. ? EDIT: I susspect that onchange is somehow different in IE and FF. Howdy. Have an asp.net form where the textboxes have had the onblur attribute added. Though VS2008 still barks it's an invalid attribute... However, my problem is primarily w/the txtFICODate field. When testing using 10/10/2009 in this field, the code displays the appropriate msg based on format param. However, on exiting the isValidDate function in debug mode, I see that the code does not stop at the txtFICODate html but moves to the txtDOBB isValidDate function. Here the param is MM/DD/YYYY and it loops back into the function but now displays a different format message. Previous code (ValidateFICODate(obj)) below also caused the same looping error. Debugging the same code with the txtDOBB field (10/10/56), I see it enter the function, display the appropriate message and exit. However, in debug, the code comes back to the function and then selects the field contents. Appreciate any suggestions/comments on how to fix problem so code stops at the txtFICODate field . Using xp Pro SP3, visual studio 2008 (c#). in the process of writing this, I searched other post here related to onblur + loop. So changed the event to onchange...and while the looping does not now occur, the focus just moves to the next field. Huh? Thanks, Rey Code: On page load code(if (!isPostBack)):
txtFICODate.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YY');");
txtDOBB.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YYYY');");
txtDOBC.Attributes.Add("onblur", "isValidDate(this, 'MM/DD/YYYY');");
Code: <asp:TextBox ID="txtDOBB" runat="server" Font-Bold="true"
Text="" Columns="10" TextMode="SingleLine" AutoPostBack="false"
onblur="return isValidDate(this, 'MM/DD/YYYY');"
Width="120px"></asp:TextBox>
<asp:TextBox ID="txtDOBC" runat="server" Font-Bold="true"
Text="" Columns="10" TextMode="SingleLine" AutoPostBack="false"
onblur="return isValidDate(this, 'MM/DD/YYYY');"
Width="120px"></asp:TextBox>
<asp:TextBox ID="txtFICODate" runat="server" Font-Bold="true" AutoPostBack="false"
onblur="return isValidDate(this, 'MM/DD/YY');"
Text="" Columns="6" TextMode="SingleLine"
Width="120px" ></asp:TextBox>
Code:
function isValidDate(ctrl, fmt)
{
// retrieved 9/11/09
// from http://www.dotnetspider.com/resources/20790-Validatin-date-MM-DD-YY-Format-using-javascript.aspx
// modified to pass in format (mm/dd/yy, mm/dd/yyyy so msg is appropriate if incorrect
// also removed - option for dates, i.e. 09-11
var dateStr = ctrl.value;
var datePat;
//var datePat = /^(\d{1,2})(\/)(\d{1,2})\2(\d{2}|\d{4})$/;
if (fmt.toString().toUpperCase() == 'MM/DD/YY')
{
datePat = /^(\d{2})(\/)(\d{2})\2(\d{2})$/;
}
if (fmt.toString().toUpperCase() == 'MM/DD/YYYY')
{
datePat = /^(\d{2})(\/)(\d{2})\2(\d{4})$/;
}
var matchArray = dateStr.match(datePat); // is the format ok?
if (matchArray == null)
{
if (fmt.toString().toUpperCase() == 'MM/DD/YY')
{
alert("Invalid date format.\n"
+ "Please enter the date in the MM/DD/YY format (example: 1/15/08).")
ctrl.focus();
ctrl.select();
return false;
}
if (fmt.toString().toUpperCase() == 'MM/DD/YYYY')
{
alert("Invalid date format.\n"
+ "Please enter the date in the MM/DD/YYYY format (example: 1/15/2008).")
ctrl.focus();
ctrl.select();
return false;
}
}
// match breaks date down
month = matchArray[1]; // parse date into variables
day = matchArray[3];
year = matchArray[4];
if (month < 1 || month > 12)
{
// check month range
alert("Month must be between 1 and 12.");
return false;
}
if (day < 1 || day > 31)
{
alert("Day must be between 1 and 31.");
return false;
}
if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31)
{
alert("Month " + month + " doesn't have 31 days!")
return false
}
if (month == 2)
{
// check for february 29th
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day > 29 || (day == 29 && !isleap))
{
alert("February " + year + " doesn't have " + day + " days!");
return false;
}
}
return true; // date is valid
}
// ****************************************************
function ValidateFICODate(obj)
{
var dateFormat = 'MM/DD/YY';
var isSuccess = false;
var objID = obj.id;
var hidFICODate = document.getElementById('hidFICODate').value;
if (obj.value == '')
{
alert('Please enter FICO date.' + '\n'
+ 'Required field.');
//document.frmCustInfo + '.' + obj.id + '.' + focus();
obj.focus();
obj.select();
return false;
}
// now check if valid date
isSuccess = isValidDate(obj, dateFormat);
if (!isSuccess)
{
obj.focus();
obj.select();
return false;
}
if (isSuccess)
{
if (obj.value != hidFICODate)
{
document.getElementById('hidFICODate_Updated').value = 'UPDATED';
document.getElementById('hidFICODate').value = obj.value;
}
}
return isSuccess;
}
Hey everyone, I'm working on a website, and I have one page that uses a forum that is supplied by tal.ki. The forum works fine, but the .js file that the forum uses is grabbing the image that I am using as my header on the page (not in the header of the html, just on top of the page) and moves it down and right from where it is supposed to be. My apologizes for the file being so long, but I have no idea which line it is that makes the image move. If needed, I have pictures of how it looks in the program that I use, vs. how it looks when viewed in a browser. Thanks so much (in advance) for any help. Code: if (!window.chatter) {
window.chatter = function() { return this; }();
}
if (!window.chatter.embeds) {
window.chatter.embeds = {};
}
window.chatter.embed = function(host, args) {
var host = host;
var cid = Math.floor((Math.random())*1000000000).toString();
var default_height = 1600;
var embed_url = window.location.href.split('#')[0];
var current_path = window.location.hash.substr(1);
var disable_path = current_path && current_path[0] != "/";
disable_path |= (window != top);
if (!current_path || disable_path) {
if (!current_path && !disable_path) {
location.href = embed_url + "#/";
}
current_path = "/";
}
if (window.gadgets)
embed_url = ''; // Don't let the site change the hash
window.chatter.embeds[cid] = this;
handleCommand = function (cmd) {
if (cmd[0] == 'ch_resize') {
resizeFrame(cmd[1]);
} else if (cmd[0] == 'ch_load') {
if (disable_path)
current_path = cmd[1];
else {
current_path = window.location.hash.substr(1);
if (current_path != cmd[1]) {
current_path = cmd[1];
location.href = embed_url + "#" + current_path;
}
}
} else if (cmd[0] == 'ch_unload') {
if (window.attachEvent || findPosScroll('chatterframe'+cid) < 0)
document.getElementById('chatterframe'+cid).scrollIntoView(true);
// resizeFrame(default_height);
} else if (cmd[0] == 'ch_scrollto') {
window.scrollTo(0, findPos('chatterframe'+cid)+parseInt(cmd[1], 10));
} else if (cmd[0] == 'ch_delfoot'){
var a = document.getElementById(cmd[1]);
a.parentNode.removeChild(a);
}
}
if (window.postMessage) {
function onMessage(e) {
var cmd = e.data.split(':');
var frame = document.getElementById('chatterframe'+cid);
if (frame.contentWindow != e.source)
return;
handleCommand(cmd);
}
if (window.addEventListener)
window.addEventListener("message", onMessage, false);
else
window.attachEvent("onmessage", onMessage);
} else {
/* Fall back for browsers that don't support HTML5's postMessage */
var msg_seq = null;
function checkMessages() {
var chatter_frame = window.frames['chatterframe'+cid];
if (!chatter_frame)
return;
try {
var bus = chatter_frame.frames.msg_frame;
var hash = bus.location.hash.substr(10);
} catch(e) {
return;
}
var cmd = hash.split(':');
var seq = cmd[0];
if (msg_seq == seq)
return;
msg_seq = seq;
cmd.splice(0, 1);
handleCommand(cmd);
}
setInterval(checkMessages, 300);
}
function checkHash() {
var path = window.location.hash.substr(1);
if (!path)
path = "/";
if (path != current_path) {
current_path = path;
window.frames['chatterframe'+cid].location.replace(buildURL(path));
}
}
if (!window.gadgets) {
if (!disable_path) {
if ("onhashchange" in window) {
if (window.addEventListener)
window.addEventListener("hashchange", checkHash, false);
else
window.attachEvent("onhashchange", checkHash);
} else {
setInterval(checkHash, 300);
}
}
}
function buildURL(path) {
return 'http://' + host + path + "?" + args + "&cid=" + cid + "&eh=" + encodeURIComponent(embed_url);
}
function resizeFrame(height) {
var el = document.getElementById('chatterframe'+cid);
el.style['height'] = height + "px";
if (window.gadgets) {
gadgets.window.adjustHeight();
}
}
function findPosScroll(id) {
var node = document.getElementById(id);
var curtop = 0;
var curtopscroll = 0;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
} while (node = node.offsetParent);
return curtop - curtopscroll;
}
return -1;
}
function findPos(id) {
var node = document.getElementById(id);
var curtop = 0;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
} while (node = node.offsetParent);
return curtop;
}
return -1;
}
//--Auto Theming:
try{
var theme_args = '';
if (window.chatter_options) {
if ('css_append' in window.chatter_options) {
theme_args = '&cssa='+encodeURIComponent(window.chatter_options['css_append']);
} else if ('css_replace' in window.chatter_options) {
theme_args = '&cssr='+encodeURIComponent(window.chatter_options['css_replace']);
}
}
if (theme_args === '') {
document.write("<span id='probe"+cid+"'></span>");
var op = document.getElementById('probe'+cid);
var p = op;
var i = 0;
var color = null;
var font = null;
while (i < 1000){
p = p.parentNode;
if (window.getComputedStyle) {
var style = window.getComputedStyle(p, null);
color = style.getPropertyValue('background-color');
} else {
color = p.currentStyle.backgroundColor;
}
if(color != 'transparent' && color != '' && color != 'rgba(0, 0, 0, 0)') {
break;
}
color = null;
i++;
}
if (window.getComputedStyle) {
var style = window.getComputedStyle(op, null);
font = style.getPropertyValue('font-family');
} else {
font = op.currentStyle.fontFamily;
}
//ie8 no like this
//delete op.parentNode.removeChild(op);
if (font)
font = font.replace(/['"]/g,'');
theme_args = '&f='+encodeURIComponent(font) +'&t='+encodeURIComponent(color)+'&nocss=1';
}
} catch(e) { }
var forum_code = "<iframe id='chatterframe"+cid+"' name='chatterframe"+cid+"' src='" + buildURL(current_path) + theme_args + "' style='width:100%; height:" + default_height + "px; border:0;' scrolling='no' frameborder='0' border='0' width='100%' height='" + default_height + "'></iframe>";
document.write(forum_code);
return this;
};
try {
if (window.location.hash.substr(0, 9) != "#msgframe")
window.chatter.embed('qcx1quj3rz.embed.tal.ki', '');
} catch(e) {
document.write("<div style='background-color:white; color:black';>Forum failed to load: " + e + "</div>");
}
hi, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.
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 just want to know : the animation you know the eyes of the who follow the mouse I can not put it on my web how could I please help me thank you I wrote this code for 1 image, and it is working perfectly fine: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
the problem starts when I want to use this code for 4 images, can anyone correct it please: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
{
document.getElementById("facebook").src = "images/gfacebook.png";
}
{
document.getElementById("google").src = "images/ggoogle.png";
}
{
document.getElementById("twitter").src = "images/gtwitter.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
{
document.getElementById("facebook").src = "images/facebook.png";
}
{
document.getElementById("google").src = "images/google.png";
}
{
document.getElementById("twitter").src = "images/twitter.png";
}
Hi frds , I have requirement that when ever I hover the mouse on image then the mouse pointer should be hand symbol , So for that I have written the code as <a style="cursor: hand;"> <img ....?</a> in IE it works fine but in Firefox it doesnot works Note : I have already used as <a href="#"> <img ....></a> but due to this , the screen is jumping when we click on image Thanks Raj Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript??? pls help... is it possible to make the mouse be at a given position on the screen using javascript for example i am writing a element resize script and i would like to have it so when u click on the resize button the cursor moves to the bottom right corner of the element for the starting position
Hi, Does anyone knows how to use this effect using javascript? http://www.modonline.com/ Really appreciate if someone can help me. Thank You, Nadun How to mouse over the image then the words will appear below it?
I have a pop-up message box, that I'd like help changing to a mouse-over message box. Any help would be appreciated. Thanks Code: <style>
.msg { display:block; position:absolute; top:300px;
left:300px; width:350px; background-color:#eeeeff; border-style:solid;
border-width:1px; padding:15px 20px 5px 20px; }
.msgclose { text-decoration:none; font-size:0.9em;
font-variant:small-caps; margin-top:10px; }
</style>
<div id="popupMsg" class="msg">
You must read this message.<br>
This is a test message box <br />
<div style="width:100%; text-align:right;">
<a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'block';
return false;"><font color="#800000">Close Window</font></a>
</div>
background: display 3-4 pictures and a generic parargraph. when you mouseover a picture the parargragh changes to the bio of the person pictured and doesn't change until a different picture is mouseovered or a reset butten is clicked. current code: i have adapted some code I found (thank you, donator) to basicly hide and unhide a span ID on mouseover. if functions as i want but the element id is hardcoded and i would like it to be dynamic on mouse location. not being that familair w/ coding and / or javascript; i'm stuck. Code: <script type="text/javascript">
var el;
var cpic; //elementId via mouse position
window.onload=function() {
el=document.getElementById('pic1');
el.onmouseover=function() {
changeText('hide','show')
}
}
function changeText(cl1,cl2) {
document.getElementById('span1').className=cl1;
document.getElementById('span2').className=cl2;
}
</script>
so the above works for 1 image, but as you can see "pic1" is hard coded. i figured i could define "cpic" to takes it's place, but i'm not sure how to get the elementId (i'm assuming it would be from the mouse position). if the above code is totaly the wrong approach let me know. it was just the first thing i found that seemed to do what i needed. on the HTML side "span1" is the default text and "span2" is the hidden mouseover text. i'm assuming that by adding 2 more pictures i'll need to add "span3" and "span4". i'll also have to find a way of hiding the other spans. I.E. if i go from pic2 to pic3 then, the pic2 text will have to be hidden before pic3 text is displayed. one thing i don't want to do is restrict the mouse to be focused on the picture to display the text. the text should change only when another picture is in focus or the rest button is clicked. any direction / suggestions would be a big help. regards, Fatmann66 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]);
}
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 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!!! 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>
|
|||||||