|
|
I was wondering if there is a function or method to Brighten an Image on Load(or Onclick) . The reason i need is i have an image gallery which lists all the images in smaller size on the left side of the webpage . when the user clicks on the smaller size image on left frame , it shows on the right side with its original size . I want to differniate the smaller image which the user clicked on the left frame from other images .
Thanks!!!!!!!!!!
|
|
|
|
Thanks for the tips provided . I do have to display images dynamically selected by the user . So i probably cannot have thumbnails .
I'm little new to web programming so please bear wiht me . You do suggest to use CSS border's .But how would i differniate between the image selected and not selected .
<img class="thumbNormal" src="/photo/thumb1.jpg">
|
|
|
|
Here is a complete, tested, working page to show you some of these techniques. This script shows how to use CSS to format your page as well as how to use javascript to dynamically change the CSS properties of the page elements. It also has a DHTML technique to change the source of an image tag. Copy & Paste this into a new HTML file, then open in your browser.
<html>
<head>
<style>
body {
background-color:#000000;
color:#E27907;
font-family:Verdana,Arial;
font-size:10pt;
letter-spacing:2;
}
.thumbNormal {
border:4px solid #000000;
}
.thumbSelected {
border:4px solid #ff0000;
}
</style>
<script language=javascript>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbNormal";
}
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
</head>
<body>
Click a photo on the left to view full size.
<table border=0>
<tr>
<td valign=top>
<img id=1 class="thumbNormal" src="http://sailfish.exis.net/~spook/3lio103.jpg" width=120 onclick="SelectImg(1)">
<br><img id=2 class="thumbNormal" src="http://sailfish.exis.net/~spook/3lio20.jpg" width=120 onclick="SelectImg(2)">
<br><img id=3 class="thumbNormal" src="http://sailfish.exis.net/~spook/3lion19.jpg" width=120 onclick="SelectImg(3)">
</td>
<td width=15>Â </td>
<td valign=top>
<img id=0 src="">
</td>
</tr>
</table>
</body>
</html> |
|
Please let us know how it goes!
|
|
|
|
|
|
I was looking for this statement
document.getElementById(id).className = "thumbSelected"; and thats exactly what you had . Thanks a bunch!!!!!
|
|
|
|
Troy,
Neat code and thanks for posting it.
I am working with iFrames and am in need of some assistance.
I have page with table of a few links and a gallery of images. On top of this page I have an iFrame that is transparent and not visible with an html page
<body STYLE="background-color:transparent">
<table border="0">
<tr>
<td background="#000033" align="center" valign="middle">
<img src="/forum/picdisp.htm" name="picdisp" id="picdisp">
</td>
</tr>
</body>
that covers the table with the links to the galleries.
When the user clicks a link, I populate the table at the right with thumbnails. When the user clicks a thumbnail, the larger image of that thumbnail appears in the iFrame, but as an image and not in the img src named picdisp.
I have a button that allows the user, when clicked, to hide the iFrame and see the table of links again.
I am so close, but have a problem with the iFrame. I know I should be able to control the properties of the iFrame with something like:
document.frames("Frame1").document.body.style.visibility="hidden";
but can you tell me how I can change the src in the img object in the picdisp.htm page in the iFrame ...... ha, if that makes sense ....
The page is at Help needed here ... and click on the Multimedia|Images link to see what I mean.
Thanks for your help and if you have an alternate email address that might be easier, let me know.
TrueGret
|
|
|
|
This is how I did it in ASP.NET
You must set id="contenetFRM" and runat="server" attribute to your iframe.
With this line you are accessing to src property of iframe
contentFRM.Attributes["src"]="newframe.apx";
All Best,
Adnan
|
|
|
laker67
Troy Wolf
