PDA

View Full Version : for AI_90

vwphillips
08-07-2005, 11:19 AM
from pm

from AI_90
want the user to ONLY be able to click the picture to open the link, not the text, because i want the text to have the onclick function and the picture changes, thanks alot,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var URL;

function changeimage(towhat,url){
document.getElementById('targetimage').src=towhat.src
URL=url
}

function warp(){
if (URL){
window.top.location=URL;
}
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=ImgPath+preloadimages.arguments[i]
}
}

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
preloadimages("One.gif","Two.gif","Three.gif","Four.gif","Five.gif")
</script>
</head>

<body>
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td width="16%" valign="bottom"><table width="100%" height="217" border="1" cellpadding="0"

cellspacing="0">
<tr>

<td><a href="javascript:warp()"><img src="zero.gif" id="targetimage" name="targetimage" border=0></a></td>
</tr>
</table></td>
<td width="56%" valign="top">
<p align="center">
<a href="javascript:void('');" onmouseover="changeimage(myimages[0],'image1link.htm')">Image 1</a>
<br><a href="javascript:void('');" onmouseover="changeimage(myimages[1],'image2link.htm')">Image 2</a>
<br><a href="javascript:void('');" onmouseover="changeimage(myimages[2],'image3link.htm')">Image 3</a>
<br><a href="javascript:void('');" onmouseover="changeimage(myimages[3],'image4link.htm')">Image 4</a>
<br><a href="javascript:void('');" onmouseover="changeimage(myimages[4],'image5link.htm')">Image 5</a></p></td>

<td width="28%">&nbsp;</td>
</tr>
</table>
</body>
</html>


It is prefered that questions are posted on the forum for none private issues
Al_90
08-07-2005, 03:36 PM
thnaks man, sry bout dat, and is there a way to make the text in teh middle not b blue and have a hand and jus an arrow, or is dat not possible?
Al_90
08-07-2005, 04:43 PM
sry for the double post, but i figured ^^ out

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
-->
</style>
<script>
var URL;

function changeimage(towhat,url){
document.getElementById('targetimage').src=towhat.src
URL=url
}

function warp(){
if (URL){
window.top.location=URL;
}
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=ImgPath+preloadimages.arguments[i]
}
}

var ImgPath='';
preloadimages("one.gif","two.gif","three.gif","four.gif","five.gif")
</script>
</head>

<body>
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td width="16%" valign="bottom"><table width="100%" height="217" border="1" cellpadding="0"

cellspacing="0">
<tr>

<td><a href="javascript:warp()"><img src="zero.gif" id="targetimage" name="targetimage" border=0></a></td>
</tr>
</table></td>
<td width="56%" valign="top">
<div align="center">
<a onclick="changeimage(myimages[0],'image1link.htm')">Image 1</a>
<br><a onclick="changeimage(myimages[1],'image2link.htm')">Image 2</a>
<br><a onclick="changeimage(myimages[2],'image3link.htm')">Image 3</a>
<br><a onclick="changeimage(myimages[3],'image4link.htm')">Image 4</a>
<br><a onclick="changeimage(myimages[4],'image5link.htm')">Image 5</a></div></td>

<td width="28%">&nbsp;</td>
</tr>
</table>
</body>
</html>

now is there a way i can have the link open in a new window?
vwphillips
08-07-2005, 04:57 PM
Used a blank image to meet the cursor requirement



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var URL;

function changeimage(towhat,url){
document.getElementById('targetimage').src=towhat.src
URL=url
}

function warp(){
if (URL){
window.top.location=URL;
}
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=ImgPath+preloadimages.arguments[i]
}
}

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
preloadimages("One.gif","Two.gif","Three.gif","Four.gif","Five.gif")
</script>
</head>

<body>
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td width="16%" valign="bottom"><table width="100%" height="217" border="1" cellpadding="0"

cellspacing="0">
<tr>

<td><a href="javascript:warp()"><img src="zero.gif" id="targetimage" name="targetimage" border=0></a></td>
</tr>
</table></td>
<td width="56%" valign="top" align="center">
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[0],'image1link.htm')">Image 1<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[1],'image2link.htm')">Image 2<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[2],'image3link.htm')">Image 3<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[3],'image4link.htm')">Image 4<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[4],'image5link.htm')">Image 5<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
</td>

<td width="28%">&nbsp;</td>
</tr>
</table>
</html>
Al_90
08-07-2005, 05:23 PM
ok, wut i meant was when you click on the picture instead of it opening the link in the same window, i wanted it to open in a new window, thanks
vwphillips
08-07-2005, 05:26 PM
it does open in a new window
do you mean a popup window?
Al_90
08-07-2005, 05:43 PM
yea, sry bout the confusion and im very glad your still helping me, thanks so much
vwphillips
08-07-2005, 07:00 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var URL;

function changeimage(towhat,url){
document.getElementById('targetimage').src=towhat.src
URL=url
}

function warp(){
if (URL){
// window.top.location=URL;
pugNewWindow(fred,URL);
}
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=ImgPath+preloadimages.arguments[i]
}
}

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
preloadimages("One.gif","Two.gif","Three.gif","Four.gif","Five.gif")
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Script produced with PopUpGenerator
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Insert this script between the <header> tags

var fred=null;

function pugNewWindow(pugname,puglink){
pugCloseWin();

if (pugname==fred){
fred=window.open(puglink,'fred','width=500,height=400,left=50,top=50,location=yes,menubar=yes,resiza ble=yes,status=yes,scrollbars=yes,toolbar=yes');
}
}

function pugCloseWin(){
// Recommended - include onunload="pugCloseWin();" in the <body> tag.
if (fred&&!fred.closed){ fred.close(); }
}


//-->
</script>



<body onunload="pugCloseWin();" >
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td width="16%" valign="bottom"><table width="100%" height="217" border="1" cellpadding="0"

cellspacing="0">
<tr>

<td><a href="javascript:warp()"><img src="zero.gif" id="targetimage" name="targetimage" border=0 width=150 height=150 ></a></td>
</tr>
</table></td>
<td width="56%" valign="top" align="center">
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[0],'http://www.js-examples.com')">Image 1<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[1],'image2link.htm')">Image 2<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[2],'image3link.htm')">Image 3<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[3],'image4link.htm')">Image 4<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
<div style="position:relative;width:100px;" onmouseover="changeimage(myimages[4],'image5link.htm')">Image 5<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;width:100px;height:20px;"></div>
</td>

<td width="28%">&nbsp;</td>
</tr>
</table>
</html>