PDA

View Full Version : Image enlarge off mouse rollover .....

simonwar
06-Oct-2005, 06:23 PM
This is a repeated thread but explained differently, as we went off on a tangent ?

Before we go any further, do the following

: goto www.istockphoto.com,
: type in the search bar, at the top right hand corner anything, e.g. "INDUSTRY",
: let the images load,
: move your mouse over the images, wait for it though, wait a few seconds, wait.... wait..... ah!

See that pop-up.... thats what i want, that is.
I want that one !

Any ideas, Simon.
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
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

<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;
<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.
---------------------------------------------


<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.
---------------------------------------------


<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.
---------------------------------------------


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>

<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 ?
---------------------------------------------


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
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
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;
<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
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 :

<TD ALIGN="center" VALIGN="TOP">
<A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A>
</TD>
and this gives me the following HTML in the final page...
<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;

<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
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
JonT,

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

So in my Actinic.css, (modified version), I have :
#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

<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
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.
<!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/csspassthru/002033469840/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 ,

/* 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;
newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
[HTML]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
.acttitle {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
color: #660000;
}
and changed the javascript to
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.
jont
11-Oct-2005, 04:22 PM
After 10 minutes of looking it looks OK (but it is the end of a long day after a weeks holiday) and your theories should work in the CSS... still strange that it works in the <head> and not in the style sheet. All I can see are the 3 styles as you say... trailimage is creating a <div> and the other 2 to add selector styles.

Are you publishing to a server or previewing locally? If previewing locally check the style sheet in the PreviewHTML folder actually contains the new code you have copied in.

Have you tried putting in a temporary larger font in .acttitle eg 20px and not medium as this is browser specific and not always easy to spot when something is working (or not working)
simonwar
12-Oct-2005, 09:40 AM
OK, I know this thread is getting long, so I'm going to move on with the help you have all provided to date, and the fact that i have an image enlarge mouseover solution.

Finally the CSS mods are working, apart from trailimageid so until further notice and a fresh head i will continue to leave the CSS statement in the <head> section of the primary template in question.

With regard to the onmouseover and onmouseout being introduced into a NQV, i think I will start a fresh thread with this sole objective in mind.

Cheers to you all, Simon.

P.S. If anyone wants the solution I have, send me an e-mail and i will return the files, (thats if you can't extract the soution from these threads anyway).