JavaScript - How To Insert In Image Link, Popup Box Etc...

I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window.
Pathetic sitelock.com will offer no support in getting this in a popup window.

I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else.

My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want.

Here is the code that sitelock.com gave me:

<a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a>

Any help is appreciated

Hi ,

Pls solve it

Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading.


what might be the problem ..pls solve it .......its too urgent

thanks in advance

nagaraja kharvi

I'm an online web design student and i'm currently taking a javascript class
Ive used java in the past but that was ten years ago so ive been spending time refamiliarizing myself with it
I've ran into a problem with the popup coding I was given to use
I have to take this image gallery and make the image thumbnails pop up into the larger view of the image using just the java pop up window, but somehow for some reason my coding is opening up the image in both windows, the window that the thumbnails are on and the separate window, its frustrating me to death! i have to keep hitting the back button on the main page whenever i click on an image link because it opens it in both windows simultaenously. i have to submit the project because it's due but i want to work on getting this problem resolved for the future. I've attached a plain text notepad document to my post so you can see the coding

Hello everyone. I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover. Thanks.

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
<table>
<tbody>
<tr>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867796.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851557.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867803.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851637.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867802.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851627.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867799.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851597.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867797.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851567.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867798.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851577.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867800.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851607.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867801.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851617.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867804.jpg" /></a></td>
</tr>
</tbody>
</table>
<table width="270" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856598.jpg');"><img width="96" height="100" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856097.jpg" /></a></td>
<td style="text-align: center;"><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856227.jpg');"><img width="65" height="100" border="0" align="middle" src="http://entrixsports.com//ir/oi/1000954/1856098.jpg" alt="" /></a></td>
<td style="text-align: right;"><a href="http://entrixsports.com/linkTo/1304219/1000954" rel="nofollow" target="_blank"><img width="60" height="102" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856099.JPG" /></a></td>
</tr>
</tbody>
</table>

Hey guys, I'm trying to accomplish something similar to what the develop on this site did: http://backlinkwatch.com/

When you click on the text area, a clickable image, with a 50% black opacity background overlay, and an exit either through a link or clicking outside of the box, shows up.

I want to accomplish the same thing, but have the image popup show up on the page load instead of requiring a click of the text area. In addition, I would like this popup only once to each IP address; ie, if you visit a page on my site, this will show up, but if you close it and refresh the page or visit another page on the site a cookie will be stored that knows its already been opened once and it won't try to do it again.

Thanks to anyone who can help me with this!

Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts.


Thanks

xx

Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.

Hi to All,

I have this problem:
I' dl ike that, if one clicks a button, appear window_explorer in which it' s possible to choose an image that it will put in the specific td of the table.

<head>
<script>
function add_pic() {
document.forms[0].pic.value == code to choose image ... }
</script>
</head>

<body>
<form method="POST" name="FrontPage_Form1">
...
<table>
<tr><td><button onClick="add_pic()">Insert Statitistic map</button></td></tr>
<tr><td>Comments</td></tr>
<tr><td id="pic" name="pic"> PLACE IN WHICH IMAGE APPEAR </td></tr>
</table>
...
</body>

Thanks in advance !!!

P.S. I use IE6 and Windows XP

So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this?

The JavaScript:
Code:

//<!--

var imgList = new Array(
	"images/gallery/1.jpg",
	"images/gallery/2.jpg",
	"images/gallery/3.jpg",
	"images/gallery/5.jpg",
	"images/gallery/6.jpg",
	"images/gallery/duo.jpg"
	);

var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
	all_links=document.getElementById('gallery').getElementsByTagName('a');
	all_links[0].style.color="#7d3d3d";
	ShowMain(current_position);
}

function color_me(element,color){
	element.style.color=color;
}

function Prev(){
	color_me(all_links[current_position],'#000000');
	if((current_position-1)>-1){
		current_position=current_position-1;
	}
	else{
		current_position=(all_links.length-1);
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function direct_selection(number){
	all_links[current_position].style.color="#000000";
	current_position=number;
	ShowMain(current_position);
	all_links[current_position].style.color="#7d3d3d";
}

function Next() {
	color_me(all_links[current_position],'#000000');
	if((current_position+1)<all_links.length){
		current_position++;
	}
	else{
		current_position=0;
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function ShowMain(which){
	currentMain = which;
	currentMainT = which;
	if ( currentMain < 0 ) currentMain = 0;
	if ( currentMainT < 0 ) currentMainT = 0;
	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
	document.getElementById('mainImg').src = imgList[currentMain];
	document.getElementById('mainText').innerHTML = clientData[currentMainT];
	var PD = document.getElementById('Pg');
	var PD2 = document.getElementById('Pg2');
	
	document.getElementById("mainText").style.display = 'inline';
//	return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->


//<!--
function preloader(){
	// counter
	var i = 0;

	// create object
	imageObj = new Image();

	// set image list
	images = new Array();
	images[0]="images/gallery/1.jpg";
	images[1]="images/gallery/2.jpg";
	images[2]="images/gallery/3.jpg";
	images[3]="images/gallery/5.jpg";
	images[4]="images/gallery/6.jpg";
	images[5]="images/gallery/duo.jpg";


	// start preloading
	for(i=0; i<=3; i++){
		imageObj.src=images[i];
	}
}
//-->

The HTML where it is displayed:
Code:

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

Hi,

I am wanting to insert text into a text area when a button or link is clicked. I know how to replace the whole lot in the text area, but I want it to insert text where the flashing cursor is in the text box. (Like Wikipedia)

If any one can help, Then I will be very, very greatfull.

Thank You.

Hi,

I'm kinda hoping this is possible but haven't found any reference to it...

I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser.

Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup?

Any assistance would be appreciated. :-)

I have a script but the script links to the email link, I need it to link the email but I also want to add the image of the email for people who do not have JS. How would I do this?

Code:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption key feature by Andrew Moulden, Site Engineering Ltd
// This code is freeware provided these four comment lines remain intact
// A wizard to generate this code is at http://www.jottings.com/obfuscator/

{ coded = "gUivfkUiz@Vzz38CfC.3ip.Uj"
  key = "gOoyt8wF74qDiElQcJTb6KXhNpS3skn510ueAfLV9BaHZxdGmrIW2CjvRYPUzM"
  shift=coded.length
  link=""
  for (i=0; i<coded.length; i++) {
    if (key.indexOf(coded.charAt(i))==-1) {
      ltr = coded.charAt(i)
      link += (ltr)
    }
    else {     
      ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
      link += (key.charAt(ltr))
    }
  }
document.write("<a href='mailto:"+link+"'>"+link+"</a>")
}

First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link).

I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked.

Help please...


Code:

<script type="text/javascript">
		<!--Hide from incompatible browsers
		/* <![CDATA[ */
				
		function changeText()
		{
			document.getElementById('link').innerHTML = 'View Smaller Image';
			return false;		
		}
		
		function changeImage()
		{			
			var newImage = new Image();
			newImage.src = "images/cottage_large.jpg";
			document.getElementById('thumbnail').src = newImage.src;	
			return false; 											
		}
				
		/**/
		/* ]]> */
		
		// Stop hiding from incompatible browsers -->
	</script>

</head>

<body>
	
	<h3>Real Estate</h3>
		 
	<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
    
	<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
	

</body>

</html>

Hi everyone,

I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this:
Code:

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
	
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;	
    return false;
  }
  
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
	fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
		isdrag = true;
		dobj = fobj;
		tx = parseInt(dobj.style.left+0);
		ty = parseInt(dobj.style.top+0);
		x = nn6 ? e.clientX : event.clientX;
		y = nn6 ? e.clientY : event.clientY;
		document.onmousemove=movemouse;

    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

The body has this:
Code:

<img src="images/balloons.gif" class="dragme">

Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page.
I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot.
I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier).

Thanks

Hi all,

I am looking to create a script that will let me use an image as the a:active link. I did a little research and found this most likely cannot be done in CSS.

Can someone point me in the right direction as far as documentation?

Thanks a bunch!