HTML, CSS and JavaScript in a Gridview

  • Thread starter Thread starter Mike
  • Start date Start date
M

Mike

Hi All,

I'm trying to create a datatable that contains <img> tags that have a
class and javascript for the onmouseover and onmouseout. I can get the
thumbnail image to show up in the Gridview but the CSS class doesn't
appear to be applied and the onmouseover and onmouseout aren't being
called either. Also, my datatable has 5 columns and 8 rows of test
data and I want the gridview paging to work but the paging links
aren't showing up. I have the paging set to 5 rows.

I got the <img> tag to show up by using the following line of code in
the RowDataBound event:

For Each cell As TableCell In e.Row.Cells
cell.Text = Server.HtmlDecode(cell.Text)
Next

Now the final table produced looks like the following but like I said
the CSS and JavaScript aren't working and the CSS and Javascript used
are in external files.

<table class="GalleryGrid" cellspacing="0" cellpadding="3" border="0"
id="GalleryGrid" style="width:600px;border-collapse:collapse;">
<tr>
<td><img id="thumb1" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/1.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb2" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/2.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb3" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/3.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb4" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/4.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb5" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/5.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
</tr>
<tr>
<td><img id="thumb6" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/6.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb7" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/7.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb8" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/8.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb9" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/9.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb10" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/10.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
</tr>
<tr>
<td><img id="thumb11" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/11.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb12" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/12.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb13" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/13.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb14" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/14.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb15" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/15.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
</tr>
<tr>
<td><img id="thumb16" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/16.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb17" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/17.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb18" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/18.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb19" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/19.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb20" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/20.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
</tr>
<tr>
<td><img id="thumb21" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/21.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb22" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/22.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb23" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/23.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb24" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/24.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
<td><img id="thumb25" alt="" title="Click Thumbnail To Select"
src="http://images.pictureu.com/ls3/photos/workarea/_DEFAULT/
thumbnails/25.jpg" class="thumbimage" onmouseover="ChangeClass
(this.id, 'thumbimagehighlight');" onmouseout="ChangeClass(this.id,
'thumbimage');" /></td>
</tr>
<tr align="center">
<td colspan="5"></td>
</tr>
</table>
 
Your HTML has to have a link tag that includes the CSS in your
listing:

<LINK href="relative/file/path/to/yourstylesheet.css" type="text/css"
rel="stylesheet">

This should appear after the <HEAD> tag.
 
Mike said:
Hi All,

I'm trying to create a datatable that contains <img> tags that have a
class and javascript for the onmouseover and onmouseout.
Click to expand...
[SNIP]

Also, the empty alt attribute- eg.

alt=""

- invalidates your HTML. alt tags must contain between 7 and 80 characters
and are not allowed to be the name of the graphics file. Those alt
attributes allow visually impaired people to make sense of your images - and
are vital to graceful degradation - eg. in the event that the image is not
served for some reason they allow your visitors to make sense of what is
missing...

Also, I'd recommend using a list rather than a table for the layout as there
is only a single column. Also, the :hover pseudo selector in CSS will ensure
that the mouseover effects you are trying to achieve continue to work, even
if the visitor has Java turned off. I use the :hover pseudo selector to
drive the menus on my sites because it isn't client-dependent and once set
up correctly, works under any condition (unlike Java, which fails at the
first sign of common sense).

eg. including in your CSS:

a img {border: 0px none;}
a:hover img {border: 1px outset &888888;}
a:active img {border 1px inset &888888;}

Will give the images a flush-button-like behaviour -although experimenting
with the parameters will allow you quite a few other options. Effective
color for 3d borders can be achieved using a value halfway between color and
background values.

You can also use the :visited pseudo selector to add an effect to an image,
which will signal that the image has already been visited.

Good luck...
 
Back
Top