Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question javascript might be messing up an image border rollover

    ok, heres the deal... i (not knowing javascript very well, and being self taught (a bad sign) in a night (a worse sign)) managed to hack out the code for a thumbnail gallery much like you would normally code with php... i did this because the site i am making is hosted on a school server that doesn't allow php (damn luddites)

    here's the test posting of the site:
    http://www.geocities.com/wide_area_i...gence_project/
    the issues here are on the page you reach by clicking an image in the gallery

    so anyway, the gallery has an array of strings backing its implementation that looks like this:

    ...[image filepath][thumbnail filepath][title][caption]...

    now at the bottom of the viewer page i made a little row of the thumbnails of the 2 previous, the current, and the 2 next thumbnails. thumbnails have a maximum hieght/width of 100pixels

    my problem is threefold

    1) if I give each image a border, I cannot make it rollover, using rollover css that works other places
    2) if I try to make the entire table cell a rollover, like i have done elsewhere, it won't take effect
    3) this one's just annoying, when there is no image in a certain position. the table shifts a bit, and i don't know why

    Code:
    <tr>
    		<td width = 100>&nbsp;</td>
    		<td width = 100 valign = center align = center>
    			<script language="JavaScript" type="text/javascript"><!--	
    				if(currentPic +8 < galleryData.length)
    				{
    					document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic +8) + '"><img src= " ' + getGalleryData(currentPic +8+1) + ' " border = 0 ></a>')
    				}
    				else
    				{
    					document.write(' &nbsp; ')
    				}
    			//--></script>
    		</td>
    		
    		<td width = 100 valign = center align = center>
    			<script language="JavaScript" type="text/javascript"><!--	
    				if(currentPic +4 < galleryData.length)
    				{
    					document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic +4) + '"><img src= " ' + getGalleryData(currentPic +4+1) + ' " border = 0 ></a>')
    				}
    				else
    				{
    					document.write(' &nbsp; ')
    				}
    			//--></script>
    		</td>
    		
    		<td width = 100 valign = center align = center>
    			<script language="JavaScript" type="text/javascript"><!--	
    				document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + currentPic + '"><img src= " ' + getGalleryData(currentPic+1) + ' " border = 2 ></a>')
    			//--></script>
    		</td>
    		
    		<td width = 100 valign = center align = center>
    			<script language="JavaScript" type="text/javascript"><!--	
    				if(currentPic -4 >=0)
    				{
    					document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic -4) + '"><img src= " ' + getGalleryData(currentPic -4+1) + ' " border = 0></a>')
    				}
    				else
    				{
    					document.write(' &nbsp; ')
    				}
    			//--></script>
    		</td>
    		
    		<td width = 100 valign = center align = center>
    			<script language="JavaScript" type="text/javascript"><!--	
    				if(currentPic -8 >=0)
    				{
    					document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic -8) + '"><img src= " ' + getGalleryData(currentPic -8+1) + ' " border = 0 ></a>')
    				}
    				else
    				{
    					document.write(' &nbsp; ')
    				}
    			//--></script>
    		</td>
    		<td width = 100>&nbsp;</td>
    	</tr>
    how can i implement the highlighting i did on the central thumbnail as a rollover effect?

    also, any other suggestions on design or implementation would be welcome

  • #2
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    well, in my experience, any image that does explicitly have it's Border attribute set in the html won't be effected by any css declarations, period. so that's probably step 1.

    second, although this isn't related to your problem, i'd suggest an alternative approach in the layout of your table. i'd change it so that it's static html, instead of being dynamicly document.written() as run time. i'd have the all images in the table be some transparent gif, and give them a css class of "thumbnail" or something. then, i'd make school of some old school javascript that's not real popular anymore, called the document.images collection, which is just what it seems: a collection of every image on the page. it's not an array, but for most practical purposes, it acts like one, so you can plow through it with a for-loop, search for images that have a className property set to "thumbnail", and set their source appropriately that way. that would make the source easier to interpret (no dynamic content to be muddled through), and it would also make the page load faster (don't have to wait for the JS to download before the page is rendered). just a thought.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts
    well, the js is tiny, so i don't think thats a major problem.. i realized that i didn't compensate for cell spacing in my defined widths, so the spacing now works...
    the only issue is making the table cell chang color... i guess this is now a css question, and no longer javascript, so ill not ask for anymore help on this section


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •