Announcement

**wjcampbe** · 06-Oct-2005, 09:30 PM

Simon,

when you are on the Istockphoto page, click View | Source in your browser and then read the code to see how it is done (you can always save a portion of the code to a text file and print it for reference). If you find any copyright notices on the page or within the source file that indicates the code used has been copyrighted (as opposed to the photos themselves being copyright), you may need to email the site owner for permission to use his code.

On your postulation in the original thread, http://community.actinic.com/showthread.php?t=16562 that the javascript somehow enlarges the photo - no sorry, it opens a larger copy (in the onmouseover code) which you will have to create and upload to the website.

**simonwar** · 07-Oct-2005, 08:03 AM

I knew you'd say that, so I had a go ....

Hi Bill,

Did as you said and went back and tried to digress the code, and it was not as bad as i thought. What i have discovered is ....

All images have this detail

HTML Code:

<tr>
 <td class="imageborder"><a href="/file_closeup/architecture/details_and_close_ups/205449_bars_steel_iron.php?id=205449">
 <img width="73" height="110" border="0" alt="Bars - Steel &amp; Iron" src="file_thumbview_approve/205449/1/istockphoto_205449_bars_steel_iron.jpg" 
 onmouseover="showtrail 'file_thumbview_approve/205449/2/istockphoto_205449_bars_steel_iron.jpg','Bars - Steel &amp; Iron','Bars - Steel &amp; Iron.  ','4.5000','2','1',270);"
 onmouseout="hidetrail();"></a></td>
</tr>

So help me with the following;

HTML Code:

<td class="imageborder">

Simply refers to opening table data that has a link to the class "imageborder", which i assume has nothing to do with the effect.
---------------------------------------------

HTML Code:

<a href="/file_closeup/architecture/details_and_close_ups/205449_bars_steel_iron.php?id=205449">

Is the page clicking on this link goes to.
---------------------------------------------

HTML Code:

 <img width="73" height="110" border="0" alt="Bars - Steel &amp; Iron" src="file_thumbview_approve/205449/1/istockphoto_205449_bars_steel_iron.jpg"

Is the orignal thumbnail image viewed on the page to start with.
---------------------------------------------

HTML Code:

onmouseover="showtrail 'file_thumbview_approve/205449/2/istockphoto_205449_bars_steel_iron.jpg','Bars - Steel &amp; Iron','Bars - Steel &amp; Iron.  ','4.5000','2','1',270);"

Now this sounds like the crux of the effect. Do I assume showtrail is a function already established in the <head> of the document ? I couldn't find it. Or is it a known command of javascript ? Or is it part of the script files referenced in the <head>

HTML Code:

<script language="javascript" src="/styleswitcher.js" type="text/javascript"></script>
<script language="javascript" src="/dom.js" type="text/javascript"></script>
<script language="javascript" src="/filesearchhover.js" type="text/javascript"></script>
<script language="javascript" src="/copyspace.js" type="text/javascript"></script>

Oooooo.... filesearchhover.js sounds a bit like what I need ? What do you reckon ?
---------------------------------------------

HTML Code:

onmouseout="hidetrail();"

Now this makes me think there is definately a function for showtrail and hidetrail, and without understanding this I am knackered.

Would I be right and therefore better off contacting the web designer ?

Simon.

Phewww !

**NormanRouxel** · 07-Oct-2005, 08:09 AM

These routines are undoubtedly in one of the .js file you mentioned. So if you go to e.g.

http://www.istockphoto.com/filesearchhover.js you can download the JavaScript source and see what they do. Please respect copyright.

**G.W.Green** · 07-Oct-2005, 09:58 AM

Hi there,

You could go along to :-

http://www.bosrup.com/web/overlib/

and use Erik Bosrup's script which offers this feature amongst a number of others.

G.W.Green
Actinic Support.

**jont** · 07-Oct-2005, 05:27 PM

Another option is to use a CSS statement and use the "display" attribute on the a:hover state for the thumbnail to then display the larger photo - use a null link on the thumbnail to create the needed <a> tag

**simonwar** · 08-Oct-2005, 08:24 AM

Hi folks, lots to do ....

Thanks to all the responses,

First , I need to apologise to AJReading, he/she directed me to the script that I was looking for. I discovered this after 'pinching', (with respect), the script from the website i saw the effect originally, as recommended by NormanRouxel. To my astonishment when i opended the file http://www.istockphoto.com/filesearchhover.js it was the same one as AJ had directed me to in the first place.... small world !

I will look at this first and look at the other options later.

Nice one, Simon.

**simonwar** · 08-Oct-2005, 01:10 PM

Ooooo, now the sticky bit, might need some help.

Got this "image enlarge mouse hover" working a treat. Basically I have loaned pending permission a script and a css.

So on my Act_Primary.html i need to reference both of these.

Then the core modification to section images is as follows;

HTML Code:

<td><img border="0" alt="Image Test" src="../images/myimage.gif" onmouseover="showtrail('../images/myimage_large.gif','Image test','Image test','3.0000','0','1',203);" onmouseout="hidetrail();"></td>

I will remove some of the attributes later, but fundamentally roll your moouse over an image and up pops an enlarged image... nice!

I will chew on this one, but until I spot this for myself, which Actinic template html shall i modify ?

Cheers, Simon.
If i get this working and permissions is OK, i can upload the code for others to use.... its very nice, especially if you want lots of thumbnails on a page but really need to show details on mouseover.

**simonwar** · 09-Oct-2005, 09:24 AM

Modifying Act_SectionLineImage.html

I want to apply this function to section images so I have copied my existing Act_SectionLIneImage.html and created a new file Act_SectionLIneImage_Hover.html.

The original template reads :

HTML Code:

<TD ALIGN="center" VALIGN="TOP">
			<A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A>
		</TD>

and this gives me the following HTML in the final page...

HTML Code:

<TD ALIGN="center" VALIGN="TOP"><A HREF="MyPage.html"><IMG SRC="../images/MyImage.gif" ALT="MyPage" BORDER=0 HEIGHT=118 WIDTH=85  ALIGN="ABSMIDDLE"></A></TD>

However, what I actually want the final code to read is;

HTML Code:

<TD ALIGN="center" VALIGN="TOP"><A HREF="MyPage.html"><IMG SRC="../images/MyImage.gif" ALT="MyPage" BORDER=0 HEIGHT=118 WIDTH=85  ALIGN="ABSMIDDLE" onMouseOver="showtrail('../images/MyImage.gif','Mypage','Mypage description.','','','1',203);" onMouseOut="hidetrail();"></A></TD>

Is this possible?

Simon.

P.S. as i copied a CSS sheet from another site it conflicts with Actinic.css on occasion, how do i sift through the copied CSS and only leave the code required by the script I am using to create the hover effect, and therefore hopefully stop the conflicts.

Also would I not be better to develop Actinic.css with the lines of code that my script needs and only have one master CSS ?

**Nadeem** · 10-Oct-2005, 11:03 AM

Hi there

I would put all the CSS code within Actinic.css so there is no overlapping. Then you will have the code available within one css file.

Kind Regards

**jont** · 10-Oct-2005, 01:38 PM

Remember that the styles adopt the "nearest to the finished result" method so changing the order of actinic.css and mysheet.css in the Act-Primary can have interesting results.

If you are getting conflicts it may be worth looking at using #identifiers so your css style is only applied to the one area only

**simonwar** · 11-Oct-2005, 08:28 AM

Lifted 'trailimageid' ...

I did just what you recommend, lifted the relevant statements from the CSS, and placed them into the Actinic.css. However, for some reason the trailimageid statement was not being acted upon.

I am not sure why but after some playing around, I removed this statement and placed it into the head section of the page in question.

Then it worked ?

I am not yet sure why this has happened but as you say, play around and interesting things do happen.

At the mo, all is working fine, however I could really do with some feedback on the ability to automatically input the onmouseover and onmouseout commands through the NQV's.

I am not even sure if this will be possible and may have to resort to manual input after generating the site.

Is it possible ?

**simonwar** · 11-Oct-2005, 09:04 AM

# identifiers ......

JonT,

I think your right, just spotted that trailimageid is precede by '#'.

So in my Actinic.css, (modified version), I have :

HTML Code:

#trailimageid {
	position: absolute;
	visibility: hidden;
	left: 0px;
	top: 0px;
	width: 286px;
	height: 1px;
	z-index: 1000;
}

So, is this why i lost this function and had to add

HTML Code:

<style type="text/css">

/*floater*/
#trailimageid {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
width: 286px;
height: 1px;
z-index: 1000;
}

</style>

in the <head> section of the document.

How do I go about removing this <head> content and making the CSS work properly ?

Simon.

**jont** · 11-Oct-2005, 11:27 AM

How are you assinging the #trailimageid ... is it in a <div> tag?

Not quite sure why it works in the <head> and not as a standalone CSS statement .... have you tried putting the #trailimageid at the very botom of the actinic.css or in the Act-Primary call your actinic.css before mysheet.css.

If you now have the "#" in the style sheet it should work without the <head> inclusion - try commenting it out of the head to see what happens.

May also be worth looking at making it a class.selector eg .trailimageid if you are wanting to assign it several times on the page.

Food for thought ... HTH

**simonwar** · 11-Oct-2005, 03:20 PM

Something is inconsistent ?

Hi Jont,

No its not inside a <div> tag. As the mod to the CSS did not work originally, i added it to the <head> as stated as follows, just a s a last resort because i was pulling my hair out at the time.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>My Company FIRE EXIT ROUTES BSi</title><Actinic:BASEHREF VALUE=""/><META NAME="ACTINICTITLE" CONTENT="FIRE EXIT ROUTES BSi"><META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="ActinicKey" CONTENT="d41d8cd98f00b204e9800998ecf8427e0">
<META NAME="Generator" CONTENT="accxecom6">
   <LINK REL=STYLESHEET HREF="actinic.css"><style type="text/css">

#trailimageid {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
width: 286px;
height: 1px;
z-index: 1000;
}
</style>

What maybe useful is to understand how i got this far;

After viewing the source of a gallery page on www.istockphoto.com, I copied;
1. http://www.istockphoto.com/filesearchhover.js, and
2. http://www.istockphoto.com/csspassth...69840/blue.css

As i liked the effect.

After scanning the javascript, i discovered that there were three CSS references;

a) #trailimageid
b) largetitle
c) borderbot

So I simply lifted them and dumped them into Actinic.css, so now Actinic.css included the following ,

HTML Code:

/* Hover Over Image */
.largetitle {
	font: bold 9pt Tahoma, Verdana, Arial, sans-serif;
	color: #FF0000;
	margin-top: 11px;
	margin-bottom: 4px;
	}

.borderbot { height: 1px; line-height: 1px; font-size: 1px; margin: 0px; padding: 0px; background: url(/images/dots.gif) repeat-x; }

#trailimageid {
	position: absolute;
	visibility: hidden;
	left: 0px;
	top: 0px;
	width: 286px;
	height: 1px;
	z-index: 1000;
}

/* Hover Over Image End*/

So this is where I am now pretty much.

The trailimageid wouldn't work, so I added it to the <head>, it worked so i left it.

However, i wanted to modify the format of the font in the Title, called by the javascript;
[HTML] newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';

HTML Code:

newHTML = newHTML + '<span class="largetitle">' + title + '</span><div class="borderbot"></div>';
	/*newHTML = newHTML + 'Rating: ' + cameraHTML + '<br/>';*/
	newHTML = newHTML + description + '<br/>';

First i changed .largetitle but no changes ????

Secondly I created a new CSS statement and called it acttitle, and placed it atthe end of Actinic.css

HTML Code:

.acttitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
	color: #660000;
}

and changed the javascript to

HTML Code:

newHTML = newHTML + '<span class="acttitle">' + title + '</span><div class="borderbot"></div>';

but no changes here either ???

Now I am confused ?

Someone spot the wood in my forest of trees, Simon.

Announcement

Image enlarge off mouse rollover .....

Image enlarge off mouse rollover .....

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment