|
|
Post a Project »
Find a Professional HTML Freelancer!
Find a Freelancer to help you with your HTML projects
| |
|
Mouse Over Image Enlarge off the cursor ....
10-06-2005, 02:52 PM
|
Mouse Over Image Enlarge off the cursor ....
|
Posts: 31
|
Hi folks,
Saw this great effect on the site www.istockphoto.com, where you can roll over an image in the gallery and it enlarges as a floating pop-up window for the duration of the mouse over.
I want one !
Any ideas anyone, Simon.
1. Goto www.istockphoto.com,
2. Enter a Search request in the top right hand corner, e.g. "industry",
3. Wait for the preview images to load,
4. Roll your mouse over an image.... but wait.... wait a bit more ...... ah.... nice image enlarge pop-up. |
|
|
|
|
10-06-2005, 03:27 PM
|
|
Posts: 50
Location: UK
|
It's a modified version of free code from javascriptkit.com.
Looking at the code, the onmouseover event calls a showtrail function from the js file here http://www.istockphoto.com/filesearchhover.js
Parameters: showtrail(imagename,title,description,ratingaverag e,ratingnumber,showthumb,height)
Example:
<script language="javascript" src="/filesearchhover.js" type="text/javascript"></script>
onmouseover="showtrail('http://www.istockphoto.com/file_thumbview_approve/64097/2/istockphoto_64097_dirty_metal_grate.jpg','Dirty metal grate','Dirty metal grate','3.0000','0','1',203);"
onmouseout="hidetrail();"
That might work, give it try...
Last edited by robsmith; 10-06-2005 at 03:38 PM..
|
|
|
|
|
10-08-2005, 07:32 AM
|
Trying to emulate the actions ....
|
Posts: 31
|
Hi Rob,
Thanks for the detail, your spot on. The script is a modified version of free code from javascriptkit.com.
Now, I am trying to simplify the scenario and create a basic page in DW MX and refer to filesearchhover.js, but I am having difficulty in apply the mouseover behaviours, assuming they are behaviours. This is what i am doing....
#1 I have uploaded filesearchhover.js from www.istockphoto.com, and saved in my root directoy.
#2 I have opened a new Basic Page in Dreamweaver, and added
HTML Code:
<script language="JavaScript" src="/filesearchhover.js" type="text/javascript" </script>
into the <head> of my page.
#3 I inserted an image into the body of my page, and instead of COPYing and PASTing the rest i wanted to construct the onmouseover, onmouseout events using DW tools. Thus ensuring syntax and struture was correct.
But, this is where I am getting stuck, i thought you added such events by clicking on the image and adding behaviours ?
But i see no behaviour for mouse roll overs.
What should I be doing ?
Cheers, Simon. |
|
|
|
|
10-08-2005, 07:54 AM
|
Hi Rob, got the mouse ove events ...
|
Posts: 31
|
Update from the previous.
I did manage to get the mouse over events sorted, but still can't get it to work ?
Here's my code ....
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="/filesearchhover.js" type="text/javascript"></script>
</head>
<body>
<img src="../images/mandatory.gif" alt="Mandatory" onMouseOver="showtrail('http://www.istockphoto.com/file_thumbview_approve/64097/2/istockphoto_64097_dirty_metal_grate.jpg','4.5000','2','1',270);" onMouseOut="hidetrail();">
</body>
</html>
I know the image is wrong but doesn't matter, as I assume the rollover will chnage to the dirty_metal_grate ?
any more ideas, Simon. |
|
|
|
|
10-08-2005, 08:24 AM
|
|
Posts: 50
Location: UK
|
It works perfect. But you need their CSS to get the format correct. You can get the CSS here: http://www.istockphoto.com//csspasst...69840/blue.css.
Here's the code. Just make sure references to the CSS and Js are correct for your directory and change the image filenames where it says Imagetest.gif to match your image.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link type="text/css" href="css/blue.css" rel="stylesheet">
<script language="javascript" src="Javascript/filesearchhover.js" type="text/javascript"></script>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="imageborder">
<img
width="161" height="92" border="0" alt="Image Test" src="Images/ImagTest.Gif"
onmouseover="showtrail('Images/ImageTest.Gif','Image test','Image test','3.0000','0','1',203);"
onmouseout="hidetrail();"
></td>
</tr>
</table>
</body>
</html>
Last edited by robsmith; 10-08-2005 at 08:27 AM..
|
|
|
|
|
10-08-2005, 09:00 AM
|
Got it cheers....
|
Posts: 31
|
Hi Rob,
Got it! Nice one, yep put my script in the wrong place.... ****!
I have contacted the webmaster at istockphoto.com about copying the scripts, i haven't told them too much, (if you know what i mean), see what they come back with.
I will play around with format a tad as i will probably only have a title, description and the image.
Thanks for the help.
P.S. by your Avatar and blessed name, I assume you are a fan of 'The Cure'..... 'In Between Days' one of my favourites, and 'Boys Don't Cry'... simple but screaming with addiction.
|
|
|
|
|
10-09-2005, 02:19 PM
|
Oh, how do I remove the default pop-up window ...
|
Posts: 31
|
As I said everything is working fine, but the default 'Alt' tag pop-up is getting in the way and looks silly.
I tried to remove this by simply removing the Alt tag, but it didn't work ?
Should it have worked ? If not what do i do ?
Cheers, Simon.
|
|
|
|
|
10-09-2005, 02:30 PM
|
|
Posts: 43,959
Name: Chris Hirst
Location: Blackpool. UK
|
The alt attribute will only popup (incorrectly) in Internet Explorer, to stop the bad behaviour include a title attribute in the <img> tag
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
|
|
|
|
|
10-09-2005, 02:55 PM
|
Yep, I set ... title=""...
|
Posts: 31
|
Cheers Chris,
I set title="" to remove any pop-up.
Also,
Been with Rob on this thread but more help welcomed, as I have a problem with overlapping css sheets, and need some help extracting the critical items from a css sheet referenced by the script mentiond in this thread, (I think thats how it works)
The script is
HTML Code:
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/
var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 270; // maximum image size.
if (document.getElementById || document.all){
document.write('<div id="trailimageid">');
document.write('</div>');
}
function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}
function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("trailimageid")
else if (document.all)
return document.all.trailimagid
}
function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function showtrail(imagename,title,description,ratingaverage,ratingnumber,showthumb,height){
if (height > 0){
currentimageheight = height;
}
document.onmousemove=followmouse;
cameraHTML = '';
if (ratingnumber == 0){
ratingaverage = 0;
}
for(x = 1; x <= 5; x++){
if (ratingaverage >= 1){
cameraHTML = cameraHTML + '<img src="/images/camera_1.gif">';
} else if (ratingaverage >= 0.5){
cameraHTML = cameraHTML + '<img src="/images/camera_05.gif">';
} else {
cameraHTML = cameraHTML + '<img src="/images/camera_0.gif">';
}
ratingaverage = ratingaverage - 1;
}
cameraHTML = cameraHTML + ' (' + ratingnumber + ' Review';
if ( ratingnumber != 1 ) cameraHTML += 's';
cameraHTML = cameraHTML + ')';
newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
newHTML = newHTML + '<span class="largetitle">' + title + '</span><div class="borderbot"></div>';
newHTML = newHTML + 'Rating: ' + cameraHTML + '<br/>';
newHTML = newHTML + description + '<br/>';
if (showthumb > 0){
newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagename + '" border="0"></div>';
}
newHTML = newHTML + '</div>';
gettrailobjnostyle().innerHTML = newHTML;
gettrailobj().visibility="visible";
}
function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
gettrailobj().left="-500px"
}
function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
//if (document.all){
// gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
//} else {
// gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
//}
if (typeof e != "undefined"){
if (docwidth - e.pageX < 300){
xcoord = e.pageX - xcoord - 286; // Move to the left side of the cursor
} else {
xcoord += e.pageX;
}
if (docheight - e.pageY < (currentimageheight + 110)){
ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
} else {
ycoord += e.pageY;
}
} else if (typeof window.event != "undefined"){
if (docwidth - event.clientX < 300){
xcoord = event.clientX + truebody().scrollLeft - xcoord - 286; // Move to the left side of the cursor
} else {
xcoord += truebody().scrollLeft+event.clientX
}
if (docheight - event.clientY < (currentimageheight + 110)){
ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
} else {
ycoord += truebody().scrollTop + event.clientY;
}
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
and the css sheet is this
HTML Code:
/* MAIN */
/*
Tahoma, Verdana, Arial, sans-serif
Arial, sans-serif
*/
body {
font: 0.675em Tahoma, Verdana, Arial, sans-serif;
/*font-size-adjust: .54;*/
line-height: normal;
/*font: 0.625em Tahoma, Verdana, Arial, sans-serif;*/
color: #494949;
margin: 7px;
padding: 0px;
}
html { font-size: 100%; line-height: 100%; /* IE hack to get the size switcher to respect the body em designation */ }
table { font-size: 100%; line-height: 100%; /* IE hack to get the size switcher to respect the body em designation */ }
img { border: 0px; overflow: hidden;}
a {
text-decoration: none;
color: #5A86B3;
}
a:hover {
text-decoration: none;
color: #38597B;
}
th {
text-align: left;
}
form { border: 0px; margin: 0px; }
#sitecontainer {
width: 100%;
text-align: center;
}
* html .maincontainer {height: 1%;}
.text {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
}
/*
.text a {
font: 1em Tahoma, Verdana, Arial, sans-serif;
text-decoration: none;
color: #5A86B3;
}
*/
.text tr {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
}
.text th {
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
text-align: left;
color: #494949;
}
.text td {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
}
.text table {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
}
.darktext {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #000000;
}
.borderbot { height: 1px; line-height: 1px; font-size: 1px; margin: 0px; padding: 0px; background: url(/images/dots.gif) repeat-x; }
.borderbotlight { height: 1px; margin: 0px; padding: 0px; background: url(/images/dots_light.gif) repeat-x; }
/* BASIC */
p { line-height: 1.2em; margin: 0px; padding: 0px 0px 12px 0px; }
strong { font-weight: bold; }
li { list-style-position: outside }
table { }
td { font: 1em Tahoma, Verdana, Arial, sans-serif; color: #000000; }
div { }
/* TOP NAV */
#topNav { margin-bottom: 9px; }
#firstNavBar {
width: 100%;
background-color: #5A86B3;
text-align: left;
}
#secondNavBar {
width: 100%;
text-align: left;
background-color: #7699BD;
font: 11px Tahoma, Verdana, Arial, sans-serif;
margin: 0px;
}
.usertable {
padding: 2px 6px 3px 9px;
}
.menuText {
line-height: 1.4em;
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #FFFFFF;
}
.menuText a {
font: 1em Tahoma, Verdana, Arial, sans-serif;
text-decoration: none;
color: #FFFFFF;
}
.menuText a:hover {
font: 1em Tahoma, Verdana, Arial, sans-serif;
background-color: #5A86B3;
color: #FFFFFF;
}
.avatar {
float: left;
margin-right: 4px;
}
/* LEFT NAV */
#navigation {
text-align: left;
width: 150px;
margin: 0px;
padding: 0px;
padding-right: 10px;
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #5A86B3;
vertical-align: top;
}
.menu {
background-color: #F1F3F5;
width: 100%;
}
.menu a {
display: block;
line-height: 13px;
font: 1em Tahoma, Verdana, Arial, sans-serif;
/*font: 1em Arial, Tahoma, Verdana, sans-serif;*/
font-weight: bold;
color: #5A86B3;
padding-top: 3px;
padding-left: 9px;
padding-bottom: 1px;
text-decoration: none;
background: url(/images/dots.gif) repeat-x bottom;
}
.menu a:hover { color: #38597B; }
.menu a.highlight {
color: #494949;
}
.statsbold {
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
color: #494949;
}
.statsresults {
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
color: #494949;
}
.statsplain {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
}
.navtext {
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
color: #5A86B3;
padding-left: 9px;
}
.stats {
padding: 3px 0px 3px 9px;
background-color: #F1F3F5;
}
.swatch {
padding: 3px 0px 3px 0px;
background-color: #FFFFFF;
}
.forumnavbar {
padding: 3px 0px 3px 9px;
background-color: #F1F3F5;
}
.banner {
margin: 5px 0px 5px 0px;
padding: 0px;
}
/* CONTENT AREA */
.floatercell {
float: left;
border: 0px solid #080;
/* TODO height: this rule was broken: no value was specified for height */
overflow: hidden;
margin: 0px;
width: 120px;
}
#sitecontent {
margin: 0px;
padding: 0px;
display: block;
}
#leftcontent {
float: left;
width: 280px;
margin-right: 10px;
text-align: left;
}
#leftdetail {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
float: left;
width: 340px;
margin-right: 10px;
text-align: left;
}
#rightcontent {
text-align: left;
float: left;
width: 310px;
padding: 0px;
}
#rightdetail {
text-align: left;
float: left;
width: 238px;
padding: 0px;
}
#controlpanel {
background: url(/images/dots.gif) repeat-x top;
text-align: left;
color: #494949;
vertical-align: middle;
padding-top: 5px;
padding-bottom: 5px;
}
#controlpanel img {
padding-top: 5px;
}
.filestats {
font: 1em Tahoma, Verdana, Arial, sans-serif;
padding-left: 9px;
padding-bottom: 9px;
}
.filestats img, .filestats .ratingcamera, .rightmenutext .ratingcamera {
padding: 0px 0px 2px 2px;
vertical-align: middle;
}
.filedetails {
font: 1em Tahoma, Verdana, Arial, sans-serif;
}
.fileoptions {
background-color: #F1F3F5;
vertical-align: middle;
}
#rightmenutext, .rightmenutext {
padding-left: 9px;
padding-top: 4px;
padding-bottom: 6px;
background-color: #F1F3F5;
color: #3C3C3C;
}
.fileoptions a {
font: 1em Tahoma, Verdana, Arial, sans-serif;
display: block;
background-color: #F1F3F5;
height: 23px;
background: url(/images/dots.gif) repeat-x top;
vertical-align: middle;
text-decoration: none;
color: #38597B;
padding-left: 9px;
padding-top: 2px;
}
.fileoptions a:hover { color: #38597B; }
.fileoptions img {
vertical-align: middle;
}
#bottomcontent {
text-align: left;
clear: both;
width: 600px;
}
.bottomfiledetails {
width: 600px;
text-align: left;
}
.optiontitle {
/* font: 1.2em Tahoma, Verdana, Arial, sans-serif; */
color: #5A86B3;
/* font-weight: bold; */
padding-top: 11px;
padding-bottom: 1px;
background-color: #FFFFFF;
}
#filesizes {
background-color: #F1F3F5;
width: 350px;
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #38597B;
}
#filesizes td {
background-color: #F1F3F5;
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #38597B;
}
.largetitle {
font: 1.2em Tahoma, Verdana, Arial, sans-serif;
color: #5A86B3;
font-weight: bold;
margin-top: 11px;
margin-bottom: 4px;
}
.smalltitle {
margin-top: 6px;
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
color: #5A86B3;
}
.iotw {
padding-bottom: 9px;
}
.archivelinks {
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
text-align: right;
padding-top: 5px;
color: #5A86B3;
}
.feature {
padding: 0px;
margin: 2px 0px 2px 0px;
}
.featurestitle {
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
color: #5A86B3;
margin-top: 0px;
}
.featureimage {
float: right;
padding: 0px;
margin: 0px 0px 0px 4px;
}
.featurestext {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
}
.featurestext a {
color: #5A86B3;
text-decoration: none;
}
.featurestext a:hover { color: #38597B; }
#filedetail {
padding-top: 14px;
padding-bottom: 14px;
text-align: center;
border: 1px;
border-color: #000000;
}
#filedetail img {
border-width: 1px;
border-color: #38597B;
}
.shaded {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #494949;
}
.shaded a {
color: #5A86B3;
text-decoration: none;
}
.shaded img {
padding-left: 9px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 4px;
}
/* BOTTOM CONTENT */
.photodescrip {
padding-top: 9px;
text-align: left;
}
.photodescrip p {
margin-top: 9px;
}
#gallerydisplay {
padding-top: 13px;
padding-bottom: 8px;
}
#gallerydisplay img {
border-width: 1px;
border-color: #38597B;
margin-bottom: 3px;
}
#gallerydisplay table {
padding-top: 8px;
padding-bottom: 8px;
}
#gallerydisplay td {
text-align: center;
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #38597B;
}
#mostpopular {
padding-top: 4px;
padding-bottom: 4px;
}
#mostpopular img {
border-width: 1px;
border-color: #38597B;
margin-bottom: 3px;
}
#mostpopular table {
padding-top: 4px;
padding-bottom: 4px;
}
#mostpopular td {
text-align: center;
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #38597B;
}
/* FOOTER */
#footer {
clear: both;
color: #5A86B3;
font: 1em Tahoma, Verdana, Arial, sans-serif;
padding-top: 4px;
}
#footer td {
color: #5A86B3;
font: 1em Tahoma, Verdana, Arial, sans-serif;
}
#footer a {
text-decoration: none;
color: #5A86B3;
}
#footer a:hover {
color: #38597B;
}
/* FORMS */
.search, .field {
width: 150px;
height: 20px;
padding: 0px;
margin: 2px;
border-color: #494949;
border-width: 1px 1px 1px 1px;
border-style: solid;
font: 1em Verdana, sans-serif;
background-color: #F1F3F5;
}
.dropdown {
font-size: 0.9em;
font-family: Verdana, sans-serif;
background-color: #F1F3F5;
padding: 0px;
height: 15px;
margin: 0px;
border-color: #494949;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
.buttonwhite {
font-size: 10px;
font-family: Verdana, sans-serif;
background-color: #5A86B3;
color: #FFFFFF;
padding: 0px;
height: 18px;
margin: 0px;
border: 1px solid #5A86B3;
}
input.topsearch { border: 1px solid #7699BD; font: 10px Arial, Helvetica; width: 130px; background: #F1F3F5; padding: 2px; line-height: 14px; }
/* EMAIL */
.quote {
border-color: #5A86B3;
border-style: solid;
border-width: 0px 0px 0px 2px;
padding: 0px 0px 0px 10px;
}
/* ZEITGEIST */
.bargraph1 {
background-color: #5A86B3;
}
.bargraph2 {
background-color: #5A86B3;
}
.bargraph3 {
background-color: #B2B2B2;
}
/* REPORT TABLE */
.reporttable { border: 0px; }
.reporttable tr {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #000000;
}
.reporttable th {
font: 1em Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
text-align: left;
color: #494949;
padding: 3px 2px 4px 2px;
background: url(/images/dots.gif) repeat-x bottom left;
}
.reporttable td {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #000000;
padding: 3px 2px 4px 2px;
background: url(/images/dots.gif) repeat-x bottom left;
}
.reporttable table {
font: 1em Tahoma, Verdana, Arial, sans-serif;
color: #000000;
}
/* OPTION CHECKBOX */
.searchoptions {
font: 1em Tahoma, Verdana, Arial, sans-serif;
padding-top: 3px;
padding-left: 9px;
padding-bottom: 3px;
color: #494949;
background-color: #F1F3F5;
line-height: 14px;
}
.searchoptions img { padding: 0px; border: 0px; background-color: #7699BD; vertical-align: -10%; }
.searchoptions strong { font-weight: bold; }
/* BLOG */
#blog { line-height: 1.2em; }
#blog .tools { font-style: italic; margin-top: 2px; margin-bottom: 2px; }
#blog .head { font-size: 1em; line-height: 1.2em; margin-bottom: 2px; }
#blog .admin { font-size: 1em; line-height: 1.2em; margin-bottom: 2px; }
#blog .item, #blog .itemsticky { margin-bottom: 12px; }
#blog .itemsticky { background-color: #F1F3F5; padding: 6px 6px 6px 6px; border: 1px solid #777777; }
#blog .comment { margin-bottom: 1px; background-color: #F1F3F5; padding: 6px 6px 6px 6px; }
#blog .caption { font-style: italic; }
/* FORUM */
#forum {}
table#forum { width: 600px; padding: 0px; margin: 0px; }
#forum .post { font: 1.2em Tahoma, Verdana, Arial, sans-serif; line-height: 1.2em; color: #3C3C3C; padding: 8px; }
.post { font: 1.2em Tahoma, Verdana, Arial, sans-serif; line-height: 1.3em; color: #3C3C3C; padding: 8px; }
/* SUPPORT */
#supportticket {}
#supportticket .message { background-color: #FFFFFF; padding: 6px 6px 6px 6px; margin: 6px; border: 1px solid gray; }
/* FILE UPLOAD */
/*.stepbox { background-color: #FFFFFF; padding: 6px 6px 6px 6px; margin-left: 6px; margin-right: 6px; border: 1px solid gray; }*/
/* ERROR */
.error { font-size: 1.1em; color: #FF0000; }
.error li { font-weight: bold; }
/* USER EDIT */
#useredit {}
#useredit .comment { margin-top: 2px; margin-bottom: 5px; color: #7699BD; font-size: 1.1em; }
/* TRAINING MANUAL */
#apptutorial { width: 100%; }
#apptutorial .inset { padding-right: 8px; }
#apptutorial .rightnav { width: 160px; }
#apptutorial .imagebox img { border: 1px solid #777777; }
#apptutorial .imagebox td { color: #F1F3F5; text-align: center; font-weight: bold; padding: 2px; }
#apptutorial .imagebox div { color: #F1F3F5; text-align: center; font-weight: bold; padding: 2px; }
/* RADIUS BUTTON */
#radiusbutt {
background: url(../../images/radius_butt_left.gif) top left no-repeat;
padding: 0px;
background-color: #5A86B3;
}
#radiusbutt td {
background: url(../../images/radius_butt_right.gif) top right no-repeat;
background-color: #5A86B3;
height: 17px;
padding: 0px 10px 0px 10px;
font-size: 10px;
font-weight: bold;
line-height: 17px;
vertical-align: middle;
border-bottom: 0px solid #FFFFFF;
}
#radiusbutt a:link { color: #FFFFFF; }
#radiusbutt a:visited { color: #FFFFFF; }
#radiusbutt a:hover { color: #000000; background: transparent; }
.radiusbutt {
background: url(../../images/radius_butt_left.gif) top left no-repeat;
padding: 0px;
background-color: #5A86B3;
}
.radiusbutt td {
background: url(../../images/radius_butt_right.gif) top right no-repeat;
background-color: transparent;
height: 17px;
padding: 0px 10px 0px 10px;
font-size: 10px;
font-weight: bold;
line-height: 17px;
vertical-align: middle;
}
.radiusbutt a:link { color: #FFFFFF; }
.radiusbutt a:visited { color: #FFFFFF; }
.radiusbutt a:hover { color: #000000; background: transparent; }
/* CREATIVE NETWORK */
#creativeNetwork .shaded { background: #F1F3F5; padding: 3px; border-bottom: 2px solid #FFFFFF; }
#creativeNetwork .alignright { text-align: right; }
#creativeNetwork .whitebg { background: #FFFFFF; }
#creativeNetwork table#forum { width: 350px; padding: 0px; margin: 0px; }
.hopFrame { height: 12px; margin-bottom: 3px; }
.hopBox { background: url(../../images/hops.gif) top left repeat; margin-right: 10px; height: 12px; float: left; }
/* SITEMAIL */
.message_unread, .message_unread td { font-weight: bold; }
/* PHOTOGRAPHER APPLICATION */
.AppQuestion { font-weight: bold; }
.AppWrongQuestion { font-weight: bold; color: #FF0000; }
.AppResultAnswer { padding-left: 20px; }
.AppQuestDescript { padding-left: 20px; }
/* NAVIGATION BAR */
.navbarimg { background-color: #5A86B3; border: 0px; }
/* THUMBNAILS */
.icons { height: 13px; }
.imageborder { border: 1px solid #CCCCCC; padding: 0px; }
/* SEARCH RESULTS */
table#results { height: 6px; margin-bottom: 3px; }
table#results .bar { background: #C2C2C2; }
table#results .background { background: #DFDFDF; }
/* TESTIMONIALS */
.testimonial { margin-bottom: 4px; padding-bottom: 4px; }
/* STEEL CAGE */
.judgevolley {
}
.judgevolley img {
width: 275px;
height: 206px;
}
/* DEBUG */
/*
div { background-color: #FF0000; }
td { background-color: #00FF00; }
*/
/* FLOATER */
#trailimageid {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
width: 286px;
height: 1px;
z-index: 1000;
}
/* CART */
.cartupgradelist table{
border : 1px solid #CCC;
border-collapse : collapse;
}
.cartupgradelist td{
border : 1px solid #CCC;
border-collapse : collapse;
}
.cartupgradelist table{
border :none;
border :1px solid #CCC;
}
.cartupgradelist tr{
padding : 4px
color : #666;
}
.cartupgradelist td{
padding : 4px;
color : #666;
}
.cartupgradelist tr:hover{
background : #FFF url(/images/tr_bck.gif) repeat;
}
.cartupgradelist td:hover{
color : #454545;
}
.cartupgradelist td a:hover{
text-decoration: underline;
}
/* COPYSPACE */
.cs_box {
border: 0px solid #CCC;
padding: 0px;
/* spacing: 0px; TODO css has no "spacing" property -- do you mean margin? */
}
.cs_xxx { border: 0px solid #888; background-color: #666; width: 20px; height: 20px;
background: url(/images/cs_grey.gif);
}
.cs_on { border: 0px solid #8C8; background-color: #4E4; width: 20px; height: 20px;
background: url(/images/cs_green.gif);
}
.cs_off { border: 0px solid #C88; background-color: #E44; width: 20px; height: 20px;
background: url(/images/cs_red.gif);
}
/* CALENDAR */
#calendarhead a:link { color: #214769; text-decoration: none; font-weight: bold; }
#calendarhead a:visited { color: #214769; text-decoration: none; }
#calendarhead a:hover { color: #000; text-decoration: none; }
#calendarhead {
border-width: 1px 1px 0px 1px;
border-color: #777;
border-style: solid;
padding: 2px;
width: 315px;
}
#calendarhead td {
background-color: #eee;
vertical-align: top;
padding: 3px;
}
#calendar { border: 1px solid #777; width: 315px;}
#calendar td :first-line { font-weight: bold; }
#calendar td { width: 45px; }
#calendar td a {
text-align: left;
border: 1px solid; border-color: #fff #9F9FB4 #9F9FB4 #EAEAF8;
padding: 8px 5px 8px 5px;
display: block; }
#calendar td a:visited {}
#calendar td a:hover {
border: 1px solid; border-color: #B9B9D2 #EAEAF8 #EAEAF8 #B9B9D2;
padding: 8px 5px 8px 5px; }
#calendar .on {background-color: #eee !important; }
#calendar .today {background-color: #E8E8FF; }
#calendar .off {
background-color: transparent;
color: #A4A7B6;
border: 1px solid; border-color: #B9B9D2 #EAEAF8 #EAEAF8 #B9B9D2;
padding: 8px 5px 8px 5px;
}
#calendar .unavailable {
background-color: #E4E7F6;
color: #A38080;
border: 1px solid; border-color: #B9B9D2 #EAEAF8 #EAEAF8 #B9B9D2;
padding: 8px 5px 8px 5px;
}
Now you may tell me to sod off and trawl through this myself....... i kind of expect that, but can you help me with how i should go about it.... what do i look for in the script that is part of the css ?
Any guidance appreciated, Simon. |
|
|
|
|
10-09-2005, 04:11 PM
|
|
Posts: 50
Location: UK
|
Hi Simon
I have scanned the javascript and can only see Largetitle, borderbot and trailimageid.
|
|
|
|
|
10-10-2005, 04:16 AM
|
Not quite working ....
|
Posts: 31
|
Hi Rob,
Copied the three CSS statements into my CSS, and removed the reference to the other CSS from my page.
Hasn't worked exactly.... the image enlarges ....but at the top of my page. It doesn't enlarge off the mouse cursor anymore, and when i scroll the page the enlarge scrolls off the page as well. Also the enlarge is not a floating box as such but a full width band with the image in the middle.
I have attached a GIF of what I get, when i preview in DW.
Forget the following: I copied the gif over and it still doesn't work properly.
I am not sure what I am looking for but i did notice a reference to a url in the borderbot statement that doesn't exist.
HTML Code:
.borderbot { height: 1px; line-height: 1px; font-size: 1px; margin: 0px; padding: 0px; background: url(/images/dots.gif) repeat-x; }
Would this mean the whole statement fails, if so can i change
HTML Code:
background: url(/images/dots.gif) repeat-x
to something say background white ?
Any ideas. Cheers, Simon.
Last edited by simonwar; 10-10-2005 at 04:39 AM..
Reason: Copied the gif over... no changes ....
|
|
|
|
|
10-10-2005, 10:07 AM
|
|
Posts: 50
Location: UK
|
That happens if you remove the TrailimageID. Just put this in the headtags of your page. It works fine for me
<style type="text/css">
<!--
/* FLOATER */
#trailimageid {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
width: 286px;
height: 1px;
z-index: 1000;
}
-->
</style>
|
|
|
|
|
10-11-2005, 10:52 AM
|
Inconsistent CSS ?
|
Posts: 31
|
Done what you say and mine works now, although I am confused why the mods to the CSS didn't work.
Is that something to do with '#' ?
Also, I want to format the font of the title, and thought that modifying largetitle would be suffice.
But again it isn't ?
I have even tried to add another statement to my CSS and start afresh using the DW tools, and modify the relevant javacript, but no luck.
Are CSS a pain in the *** or what ?
Simon.
|
|
|
|
|
04-14-2006, 10:27 PM
|
Re: Mouse Over Image Enlarge off the cursor ....
|
Posts: 6
|
Hello,
Im been trying doing the similar as simionwar did. It wont work very well. I'll pleased have someone can clear this up and help me to able make things work. I'm kind of gettin confused with this post.
__________________
-Regards
Nick
|
|
|
|
|
04-14-2006, 10:35 PM
|
Re: Mouse Over Image Enlarge off the cursor ....
|
Posts: 6
|
I did got it worked pretty well but one thing is image didnt popup with box, even the box not even near the images it keep connect top of picture istead very center or something like that.
__________________
-Regards
Nick
|
|
|
|
|
04-14-2006, 10:44 PM
|
Re: Mouse Over Image Enlarge off the cursor ....
|
Posts: 6
|
Sorry everyone i assume i got it figured out.
im tryin to editing as
<div>companyname</div>
<div><a href blah images blah</div>
<div>clientbase:</div>
<div>companyname</div>
<div>tech:</div>
<div>companyname</div>
<div>date launched:</div>
<div>companyname</div>
ill be pleased if anybody help thanks.
__________________
-Regards
Nick
|
|
|
|
|
04-22-2006, 12:45 AM
|
Re: Mouse Over Image Enlarge off the cursor ....
|
Posts: 1
Location: planet Earth
|
for what its worth, examples of code for a very similar popup can be read and downloaded at http://www.helpdevelopment.com/webhe...image_maps.htm
I also saw that this popup is being used now at www.templatemonster.com which is where I first saw it.. It was while I was searching for info on how this is done that I found the above code and this help forum. |
|
|
|
|
04-23-2006, 05:45 PM
|
Re: Mouse Over Image Enlarge off the cursor ....
|
Posts: 3
|
It all seems complicated!
|
|
|
|
|
10-10-2006, 03:56 AM
|
Re: Mouse Over Image Enlarge off the cursor ....
|
Posts: 1
Name: Darren
|
Quote:
Originally Posted by robsmith
It's a modified version of free code from javascriptkit.com.
|
Ive had a look on javascriptkit.com but was unable to identify which free code this is based off.
I want to use this mouseover floating enlarged image code for a single image (a map) on a website.
No need for text or extra stuff.. I just want the map enlarged from a thunbnail without using a popup window (which may get blocked by a popup blocker).
Please advise which free code from javascriptkit.com is used.. or if you know of another simpler bit of code that will work for my purpose.
Thanks |
|
|
|
|
10-24-2006, 06:36 PM
|
Re: Mouse Over Image Enlarge off the cursor ....
|
Posts: 17
Name: Peter Jennings
Location: Oxfordshire UK
|
Quote:
Originally Posted by darrenmi
Ive had a look on javascriptkit.com but was unable to identify which free code this is based off.
Please advise which free code from javascriptkit.com is used.. or if you know of another simpler bit of code that will work for my purpose.
Thanks
|
It seems to be a much modified version of "Simple Image Trail"
http://www.javascriptkit.com/script/...agetrail.shtml
This just has a small image (gif) following the cursor everywhere.
... later ...
I'm currently looking at Overlib, not simpler but well documented and I've used it before in a different context.
http://www.bosrup.com/web/overlib/
Last edited by pjaj; 10-25-2006 at 05:24 AM..
|
|
|
|
|
« Reply to Mouse Over Image Enlarge off the cursor ....
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
