|
JavaScript - Make Various Sections Of Image Clickable
Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs.
This is example of what I mean: Thanks Similar TutorialsI have a situation in which I have to track clicks (links etc..). The problem is, I have a larger div ie - parentDiv - like 300px height, 400px width - approximate. This div has a background image. Now, the issue arises because over this div (parentDiv), I have another div "announceDiv" on top of it showing information. I ONLY want the parts of parentDiv that is NOT covered by announceDiv to be clickable. Just to reiterate, I have a big div that I want clickable (so I can add a link to the click), but over this big div I have a smaller div showing content ie, information, that links to its own stuff. BUT I want to be able to link from this background image that is in the parentDi without affecting when I click in the smaller div that is superimposed over it. any ideas? has to work in ie6+ and ff 3+ hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing. here is the demo of the code: http://www.facebooktemplates2u.com/d...best_business/ here is where you can download the template: http://www.schoolofrok.com/facebook/html.zip/ anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA! I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button: Code: <input type="button" value="Preview" onClick="popupform();"> works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry). When I substitute Code: <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();"> everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff. Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php) Thanks in advance. So i purchased a template from template monster for wordpress. http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> In the following code I display two buttons in the randommember div. I then append the randommember div with contents of the rana variable. This variable stores information related to a featured member and displays it as a link. Basically buttons appear on screen which are then followed by the featured member. But I would like to switch this around and have the featured member appear followed by the buttons. How can I do this? Obviously I can't put the buttons into the rana variable because then these become a link also removing the links functionality. Does anybody have any ideas how I can solve this problem. I am new to Javascript so please be gentle. Code: r = Math.floor(Math.random() * x.length);
function randommember() {
name = (x[r].getElementsByTagName("name")[0].childNodes[0].nodeValue);
sex = (x[r].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
seeking = (x[r].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
image = (x[r].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
rana = document.createElement('a');
aIdName = 'random';
ahref = '#';
aclick = 'show(' + r + ')';
rana.setAttribute('id', aIdName);
rana.setAttribute('href', ahref);
rana.setAttribute('onclick', aclick);
rana.innerHTML = "<h3>Featured Member</h3><br /><img src='images/" + image + ".gif' /><br /><br />Name: " + name + "<br />Sex: " + sex + "<br />Seeking: " + seeking;
document.getElementById("randommember").innerHTML = "<input type='button' onclick='previous()' value='<<' /><input type='button' onclick='next()' value='>>' /><br />";
document.getElementById("randommember").appendChild(rana);
}
I have 3 sections next to each other on my site, if some1 adds more text then a section can display the section is resized to fit that text. The other 2 should adopt the other section(s) height. now it's all working if I use it once, but if I add more text twice, the section is not resized - this is the code I'm using to resize the sections: Code: // JavaScript Document
function adjustT()
{
var s1 = document.getElementById('section1');
var s2 = document.getElementById('section2');
var s3 = document.getElementById('section3');
if (document.getElementById('section1').offsetHeight != 380)
{
document.getElementById('section2').style.height =
document.getElementById('section3').style.height =
document.getElementById('section1').offsetHeight + 'px';
}
else if (document.getElementById('section2').offsetHeight != 380)
{
document.getElementById('section1').style.height =
document.getElementById('section3').style.height =
document.getElementById('section2').offsetHeight + 'px';
}
else if (document.getElementById('section3').offsetHeight != 380)
{
document.getElementById('section1').style.height =
document.getElementById('section2').style.height =
document.getElementById('section3').offsetHeight + 'px';
}
}
the original height of each section is 380px I have this code... I want to be able to make each image fade from one to the other. Like this... http://www.dynamicdrive.com/dynamici...nslideshow.htm Is there a way to do that with this code? Code:
<script type="text/javascript">
// Simple Javascript Time based Image Swap
var Pics = new Array();
var counter = 0;
// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";
document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()
{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>
Hi I was wondering I really like the image viewer Gamespot uses. example: http://www.gamespot.com/wii/action/s...&tag=thumb%3B1 Anyone know how to make one like that? Thanks for any replies. I've pared this down as much as I can to demonstrate the issue. What can I do to make the slide in go over the top of the image rather than underneath as at present? Code: <html>
<head>
<title>slidein</title>
<style>
#headerstudy {width:980px;height:280px;margin:0 auto;padding:0;}
#mainbook {position:absolute;top:7.5em;left:15.4m;border:0 none}
</style>
<script>
// *************** TRANSLATE
var master = new Object("element")
master.curLeft = 0; master.curTop = 10;
master.gapLeft = 0; master.gapTop = 0;
master.timer = null;
function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
{
clearTimeout(eval(layerName).timer)
var el = document.getElementById(layerName);
if(eval(layerName).curLeft != fromLeft)
{
if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft)
{
eval(layerName).curLeft = fromLeft;
}
else if(eval(layerName).curLeft < fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft + paceLeft;
}
else if(eval(layerName).curLeft > fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft - paceLeft;
}
el.style.left = eval(layerName).curLeft + 'px';
}
if(eval(layerName).curTop != fromTop)
{
if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop)
{
eval(layerName).curTop = fromTop;
}
else if(eval(layerName).curTop < fromTop)
{
eval(layerName).curTop = eval(layerName).curTop + paceTop;
}
else if(eval(layerName).curTop > fromTop)
{
eval(layerName).curTop = eval(layerName).curTop - paceTop;
}
el.style.top = eval(layerName).curTop + 'px';
}
eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30);
}
function setPace(layerName, fromLeft, fromTop, motionSpeed)
{
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) / motionSpeed;
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) / motionSpeed;
moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop);
}
var expandState = 0
function expand()
{
if(expandState == 0)
{
setPace("master", 121, 10, 10);
expandState = 1;
}
else
{
setPace("master", -120, 10, 10);
expandState = 0;
}
}
</script>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu2" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="http://aapress.com.au/images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;" bgcolor="#FFFFFF">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
sidemenu.style.top = '80px';
}
setInterval("FixY()",100);
</script>
<div id="headerstudy">
<img id="mainbook" src="http://aapress.com.au/images/booksblank.jpg" width="572" height="285">
</div>
</body>
</html>
I am working on a site for someone, and they asked me to have a small link-bar that has small thumbnail pictures next to every link. He wants the picture next to each link to change weekly, and what I was thinking of was having a small directory of imgs, he will have 31 in total, and name them 1-31.png, and have something similar to this: var now = new Date(); var dd = now.getDate(); [code] if (dd==1) document.write('<img src="pic1.gif">') else if (dd==2) document.write('<img src="pic2.gif">') else if (dd==3) document.write('<img src="pic3.gif">') else if (dd==4) [code] but what I am looking for mostly is for the ability for it to loop back through, so that after the 31st week, it starts right back to the first. hi, on my website http://zend.warrencreative.com/gemini-group/index.html I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?! is there any other way? Code: <a class="newsletter thickbox" href="#TB_inline?height=325&width=365&inlineId=myOnPageContent&modal=true">Subscribe to eNewsletter</a> <div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p> </p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&width=365&inlineId=myOnPageContent1"> <input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div> <div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div> thanks in advance I'm a designer and HTML/CSS coder only. I'd like to ask the community for the simplest solution on making an image swap to different image when the user clicks one of the many thumbnails. It's pretty standard gallery functionality, "click the thumbnail to see the big version". I'm hoping to get some JavaScript that is easy to configure even though I don't know how to write JavaScript. Here's a link to the page: http://clientzone.thermostudios.com/.../bouquets.html The thumbnails are on the left and the replicable image on the right. Thanks in advance. I need the image to move horizontal instead of vertical. Here is the code. Code: //##########################################################################//
// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
// Original Source code: http://youlove.us/
// Modified and extended by Kudos Web Solutions
// copyright 2009 kudoswebsolutions.com
//##########################################################################//
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 2000;
//The image to overlay
var backgroundheight_two = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container3').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
function scrollbackground2() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container2').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground2();
}, 100
);
}
// Initiate the scroll
scrollbackground();
scrollbackground2();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset2 + "px");
$('#overlay2').css("background-position", "50% " + offset2 + "px");
});
I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it. Unless I am doing something wrong? http://www.meta.projectmio.com/pop.html But how do I modify the code to do this, I'm hopeless? Thanks. Hi everyone, I'm new on this forum. I really need help in coding an part of my website. I want to make the logo background image fade to another background image on hover. Here is the code I have until now: Code: #logo
{margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:600px;
height:515px;}
#logo h1
{display:block;
background:url(img/logo.jpg) no-repeat;
width:600px;
height:515px;
text-indent:-10000px;
margin:0px;}
#logo h1 a
{display:block;
width:100%;
height:100%;}
#logo h1 a:hover
{background:url(img/logo.jpg) no-repeat 0px -515px;}
I want the background:url(img/logo.jpg) no-repeat; to fade to {background:url(img/logo.jpg) no-repeat 0px -515px;}. I haven't found any tutorial which explains how to do that properly. I'd be really greatful if you could help me. Thank you very much, Alex How do you make an image begin to load after a certain amount of time? e.g 3 seconds.
In the spirit of the season, I wanted to make it snow on my website. So I began digging. Eventually I ended up with a script that moved an image element down the page in a snowflake-like manner. The problem with it was it was dependant on an img element for every flake - simply no poor programming when using an Object Oriented programming language. So I decided I wanted to extend (in Java-speak; most of my programming background is in Java) the in-built Image object. The new object's src variable will lead to an image of the type of flake it is. (I want to be able to have more variance in images than a simple dot.) The new object will have a function that will allow it to move. A separate, unrelated function will control when each flakes move. I did some more research and read about prototyping on JavaScript Kit and here, but I still cant seem to get this to work. JS Lint says it's bug-free, but Firefox says "move()" is an invalid function. I am presuming the problem lies in my inability to fully grasp how to extend objects in JavaScript. Code: <html>
<head>
<script type="text/javascript">
Image.prototype.dFlake=dotFlake;
function dotFlake(xLocation,yLocation){
this.src = "simpleDotFlake.png";
this.x = xLocation;
this.y = yLocation;
}
dotFlake.prototype.move = fall;
function fall(){ // ^^ Belongs to dotFlake class.
this.style.position="absolute";
this.style.top = this.y;
this.style.left = this.x;
this.y= this.y + 1; // Falling is constant.
if (Math.random() > 0.5){ // Random direction, though.
this.x = this.x + 1;
} else{
this.x = this.x - 1;
}
}
function snow(flakes){ // Allows addition of different flakes later.
for (i in flakes){
i.move();
}
timer = setTimeout("snow()",1);
}
function startSnow(){
basicFlakes = new Array(new dotFlake(0,0));
snow(basicFlakes);
}
</script>
</head>
<body onload="startSnow()">
<h1>This is test text.</h1>
<img id="basicFlake" src="./simpleDotFlake.png" width="10" height="10" />
</body>
</html>
Any and all input is much appreciated. Thank you! Hi. I am new here. I wanted help for a JavaScript code. You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code. What I want to do is to make an html page load a different background image every time it refreshes. I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this). I already know how to do an external file (.js) and link to it from my .html page. Now I want the code to put in the .js file, and the code to put in the <body> of my .html file. Please help me Thanks Hi, I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo |
|||||||