Forums
This topic is locked
onclick behavior
01 Mar 2007 18:29:27 iz gore posted:
I have an image box on a page, with a list of numbers (1 to 10) underneath. I want to be able to click on number one and get image one in the image box, click on number 2 and get image 2 in the image box etcI have created images for all the numbers. The behavior panel does this fine for MouseOver, but I would like it to happen on onClick.
Can anyone help?
Replies
Replied 02 Mar 2007 18:48:26
02 Mar 2007 18:48:26 Javier Castro replied:
Select the link you want to affect, then go to the tag inspector - Behaviours - and change the onMouseOver to OnClick.
<img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
<img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
Replied 02 Mar 2007 19:35:30
02 Mar 2007 19:35:30 iz gore replied:
OK. But have you actually tried this and got it to work? Each time I select onclick it reverts to mouseover...
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Select the link you want to affect, then go to the tag inspector - Behaviours - and change the onMouseOver to OnClick.
<img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Select the link you want to affect, then go to the tag inspector - Behaviours - and change the onMouseOver to OnClick.
<img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Replied 02 Mar 2007 21:01:26
02 Mar 2007 21:01:26 Javier Castro replied:
Can you post your code?
Replied 03 Mar 2007 12:30:18
03 Mar 2007 12:30:18 iz gore replied:
OK - I've just done the behaviour on the first three buttons - as you can see if has come up as a Mouseover even though I selected on click...
Any help much appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../styles.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#"!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?")>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('../Images/projects/01_houseoliver/ho02_op.JPG','../Images/projects/01_houseoliver/ho03_op.jpg','../Images/projects/01_houseoliver/ho01_op.jpg')">
<!--h1 is for main left-side headings -->
<!--h2 is for main right-side headings -->
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><!--this is the header table -->
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../Images/general_graphic_items/logo_op.jpg" alt="logo and text:atomikarchitecture, architecture, interiors and design" width="324" height="115" id="header" /></td>
</tr>
</table>
<!--this is the Nav table -->
<table border="0" align="center" cellpadding="0" cellspacing="0" id="nav">
<tr>
<td><span class="bold_butt">home</span> studio projects competitions <span class="dessserts_butt">just desserts</span> contact </td>
</tr>
</table>
<!--this is the main content table -->
<table border="0" align="center" cellspacing="0">
<tr>
<td><h1>House Oliver</h1>
</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td id="subhead">Residential conversion – Primrose Hill, London</td>
</tr>
<tr>
<td><img src="../Images/projects/01_houseoliver/ho01_op.jpg" alt="House Oliver image" name="oliver_img" width="433" height="230" id="oliver_img" /></td>
<td id="orangeline"> </td>
<td id="right_col"><span id="bodytext_bold">detail</span><br />
The basement floor comprises of a white elastomeric flooring compound above a heated screed. It was poured in one piece by Billy of Coverdale.
All the fitted joinery items, timber floors and staircase elements were made specifically for the project.<br />
<span id="bodytext_bold">collaborators</span><br />
Andries Kruger
Stephen Grover – Landscape Design
</td>
</tr>
<tr>
<td width="433" id="bodytext">
<!--this is the number table for the images -->
<table border="0" cellspacing="0">
<tr>
<td><img src="../Images/ListNumbers/one.jpg" alt="" name="one" width="8" height="14" id="one" onmouseover="MM_swapImage('oliver_img','','../Images/projects/01_houseoliver/ho01_op.jpg',1)" /></td>
<td><img src="../Images/ListNumbers/two.jpg" name="two" id="two" onmouseover="MM_swapImage('oliver_img','','../Images/projects/01_houseoliver/ho02_op.JPG',1)" /></td>
<td><img src="../Images/ListNumbers/three.jpg" name="three" id="three" onmouseover="MM_swapImage('oliver_img','','../Images/projects/01_houseoliver/ho03_op.jpg',1)" /></td>
<td><img src="../Images/ListNumbers/four.jpg" name="four" id="four" /></td>
<td><img src="../Images/ListNumbers/five.jpg" name="five" id="five" /></td>
<td><img src="../Images/ListNumbers/six.jpg" name="six" id="six" /></td>
<td><img src="../Images/ListNumbers/seven.jpg" name="seven" id="seven" /></td>
<td><img src="../Images/ListNumbers/eight.jpg" name="eight" id="eight" /></td>
<td><img src="../Images/ListNumbers/nine.jpg" name="nine" id="nine" /></td>
<td><img src="../Images/ListNumbers/ten.jpg" alt="" name="ten" width="14" height="14" id="ten" /></td>
</tr>
</table>
<!--this is the emd of number table for the images -->
<span id="bodytext_bold">brief</span> <br />
To transform a dark basement flat into a light and airy two storey apartment for living and working<br />
<span id="bodytext_bold">concept</span><br />
To remove all visible load bearing structure from the basement and excavate the front garden in order to maximise light and storage </p>
A new open plan living space was created in the basement level with direct access to the rear garden, itself an extension of the internal space. Bedrooms we relocated to the ground floor and feature fully glazed ensuite bathrooms. </p></td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Any help much appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../styles.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#"!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?")>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('../Images/projects/01_houseoliver/ho02_op.JPG','../Images/projects/01_houseoliver/ho03_op.jpg','../Images/projects/01_houseoliver/ho01_op.jpg')">
<!--h1 is for main left-side headings -->
<!--h2 is for main right-side headings -->
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><!--this is the header table -->
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../Images/general_graphic_items/logo_op.jpg" alt="logo and text:atomikarchitecture, architecture, interiors and design" width="324" height="115" id="header" /></td>
</tr>
</table>
<!--this is the Nav table -->
<table border="0" align="center" cellpadding="0" cellspacing="0" id="nav">
<tr>
<td><span class="bold_butt">home</span> studio projects competitions <span class="dessserts_butt">just desserts</span> contact </td>
</tr>
</table>
<!--this is the main content table -->
<table border="0" align="center" cellspacing="0">
<tr>
<td><h1>House Oliver</h1>
</td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td id="subhead">Residential conversion – Primrose Hill, London</td>
</tr>
<tr>
<td><img src="../Images/projects/01_houseoliver/ho01_op.jpg" alt="House Oliver image" name="oliver_img" width="433" height="230" id="oliver_img" /></td>
<td id="orangeline"> </td>
<td id="right_col"><span id="bodytext_bold">detail</span><br />
The basement floor comprises of a white elastomeric flooring compound above a heated screed. It was poured in one piece by Billy of Coverdale.
All the fitted joinery items, timber floors and staircase elements were made specifically for the project.<br />
<span id="bodytext_bold">collaborators</span><br />
Andries Kruger
Stephen Grover – Landscape Design
</td>
</tr>
<tr>
<td width="433" id="bodytext">
<!--this is the number table for the images -->
<table border="0" cellspacing="0">
<tr>
<td><img src="../Images/ListNumbers/one.jpg" alt="" name="one" width="8" height="14" id="one" onmouseover="MM_swapImage('oliver_img','','../Images/projects/01_houseoliver/ho01_op.jpg',1)" /></td>
<td><img src="../Images/ListNumbers/two.jpg" name="two" id="two" onmouseover="MM_swapImage('oliver_img','','../Images/projects/01_houseoliver/ho02_op.JPG',1)" /></td>
<td><img src="../Images/ListNumbers/three.jpg" name="three" id="three" onmouseover="MM_swapImage('oliver_img','','../Images/projects/01_houseoliver/ho03_op.jpg',1)" /></td>
<td><img src="../Images/ListNumbers/four.jpg" name="four" id="four" /></td>
<td><img src="../Images/ListNumbers/five.jpg" name="five" id="five" /></td>
<td><img src="../Images/ListNumbers/six.jpg" name="six" id="six" /></td>
<td><img src="../Images/ListNumbers/seven.jpg" name="seven" id="seven" /></td>
<td><img src="../Images/ListNumbers/eight.jpg" name="eight" id="eight" /></td>
<td><img src="../Images/ListNumbers/nine.jpg" name="nine" id="nine" /></td>
<td><img src="../Images/ListNumbers/ten.jpg" alt="" name="ten" width="14" height="14" id="ten" /></td>
</tr>
</table>
<!--this is the emd of number table for the images -->
<span id="bodytext_bold">brief</span> <br />
To transform a dark basement flat into a light and airy two storey apartment for living and working<br />
<span id="bodytext_bold">concept</span><br />
To remove all visible load bearing structure from the basement and excavate the front garden in order to maximise light and storage </p>
A new open plan living space was created in the basement level with direct access to the rear garden, itself an extension of the internal space. Bedrooms we relocated to the ground floor and feature fully glazed ensuite bathrooms. </p></td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replied 04 Mar 2007 05:13:18
04 Mar 2007 05:13:18 Javier Castro replied:
Sorry for the delay,
I tested my suggestion and it did work. I just went to the behaviors and change the onMouseOver to onClick and voila!. saved the file and it worked just fine.
What version of DW are you using?
I tested my suggestion and it did work. I just went to the behaviors and change the onMouseOver to onClick and voila!. saved the file and it worked just fine.
What version of DW are you using?
Replied 04 Mar 2007 16:07:50
04 Mar 2007 16:07:50 iz gore replied:
Did it really?! I'm using DW MX2004 - what version are you using?
thanks,
dizigniz
thanks,
dizigniz
Replied 04 Mar 2007 18:33:31
04 Mar 2007 18:33:31 Javier Castro replied:
I'm using DW8(.02) I think, I forget. However, I did not make any other changes to it except replace the image files with my own to test and it worked. I would think that if you do your onMouseOver first and after you change them manually it would work as well. Then Sometimes DW replaces manual changes back to the DW code so, I would do it manually and do not open it in DW after that or put a nice comment reminding you what to do if you do the changes.
Cheers
Cheers
Replied 04 Mar 2007 20:00:12
04 Mar 2007 20:00:12 iz gore replied:
Thanks for that - it does work if I change the code manually. Have you found DW8 to be a great improvement?
Thanks for your efforts.
Thanks for your efforts.
Replied 04 Mar 2007 21:04:55
04 Mar 2007 21:04:55 Javier Castro replied:
I was not sure at first but as you spend time working with it, it becomes quite easier to use. Once in a while I notice few quirks, but I'm not sure if it is the software or perhaps hardware, although I do have 1 gig Ram and plenty of space. The one thing that drives me nuts though, is that when I have to work with DBs sometimes it takes forever to connect to the db or it wants to do it everytime I move my mouse. I think it is the worst part. Otherwise, I'm a happy camper.
Cheers.
Cheers.