PDA

View Full Version : Position of Images on Mouse over



Rob (SA)
10-18-2007, 06:38 PM
Hi Folks,

I have a script that on muse over on an image the image appears in the center of the screen.

I would like to postion the enlarged image in a position of my choice on the screen and not specifically the center.

Sizing the image is not a problem.

If I could get some advice her it would be most appreciated

boogyman
10-18-2007, 06:45 PM
Please post a link to the problematic code so we can better help troubleshoot with you

and read http://www.dynamicdrive.com/forums/showthread.php?t=24866

Rob (SA)
10-19-2007, 11:07 AM
Hi Folks,

Thanks for the speedy reply.

I havent posted the page yet to have a link but can produce a html file.

Unfortunatly I cannot use the option to attach this file and am looking for an alternative to send the html file for reveiw.

I have considered the option below but that will not allow me to post a html file.

Your attention and response in advice will be most welcome

Kind Regards
ROb

ddadmin
10-19-2007, 09:51 PM
But is your question on a Dynamic Drive script found on this site? That's what this category is for ("DD Scripts Help").

Rob (SA)
10-29-2007, 03:10 PM
Hi Folks,

I have published the page www.gnjgf.co.za/iptcour.html.

In answer to your last question I am not sure if it is a dynamic drive script or code or. . .

It would be appreciated if you could identify it that it hopefully is and then assist me if at all possible.

Kind Regards
Rob

jscheuer1
10-29-2007, 04:23 PM
That's:

http://www.javascriptkit.com/script/script2/divviewer.shtml

Not a DD script. You would need to go into the script and find where it sets the left and top of the outer container and adjust to suit.

I'd also suggest starting over with a clean version of the script and at least get that working before asking for help. Your demo page is such a mess at the moment, I wouldn't wouldn't want to even try to fix it.

Rob (SA)
10-29-2007, 05:09 PM
Hi John,

Thank very much for your openess and willingness to help.

The mess you refer to is my attempt to copy and paste the same script to postions in the hope of getting my desired effects. I know it will get better.

thanks again I will look at the "container" position and see what I vcan come up with.

Kind Regards
Rob

Rob (SA)
10-29-2007, 05:18 PM
Hi John,

Would this be the type of "container" you refer to?

By looking at this could you tell if this is the correct place to make the necessary changes?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>iptcour</title>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)">
<meta name="GENERATOR" content="Created by BlueVoda">
<style type="text/css">
div#container
{
width: 1160px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="GENERATOR" content="Created by BlueVoda">
<script src="DV.js" type="text/javascript">

Kind Regards
ROb

jscheuer1
10-29-2007, 05:43 PM
No, and only one DOCTYPE, html, head, and title tag allowed per page. What you have there is style, not a container. Even if you were to determine the proper selector for the script generated container, it is doubtful that you could override its script generated positioning via style.

What I suggested, and still do, is to get a clean version of the script working on the page. Use only one copy of the script. It would be a plus if the page validates, but at the very least avoid having duplicates of tags that are for once only use. I think the body tag is the only other one like that.

Take your best shot at that, and then I'll have a look at it. The container is in the script and its top and left are set here:


with(dv.parentDV.style) {
width = mid["width"] - (2*borderDV + 2*spaceDV);
height = mid["height"] - (2*borderDV + 2*spaceDV);
top = mid["top"] + borderDV + spaceDV;
left = mid["left"] + borderDV + spaceDV;
visibility = "visible";
}

I remember working on this script before a few times, it is sort of popular. It won't work in many browsers if the page has a valid DOCTYPE because dimensions and positions are given as numbers that represent pixel units, not as actual pixel units. Unless you need the script's ability to resize an image to available page/window size, you would be better off with some other script. If you are moving the image around, I doubt that the resizing routines would be of much use anyway.

For more discussion of this script, see:

http://www.dynamicdrive.com/forums/showthread.php?t=23228

Rob (SA)
10-29-2007, 06:05 PM
Hi John,

Thanks very much for the links and help.

I presume that I replace the words "top" and "left" with values between the " ".

This should work for the first column.

Looking at th elinkit seems like you hav egone through the same exercise previously and would I be understanding that in making two arrays it was to do a similar thing to which i have set out?

I will give the suggestions you have made some attention.

I hav ealso cleaned up the linked page a little to veiw better but as per normal will require the advice and guidance of the folk that know.

Thanks again
Rob

Rob (SA)
10-29-2007, 08:12 PM
Hi John,

I have tried replacing a value in the place of the words but no success. The effect I got was that the mouse over effect stopped completely.

I will have to search further

Regards
Rob

jscheuer1
10-29-2007, 10:02 PM
Hi John,

Thanks very much for the links and help.

I presume that I replace the words "top" and "left" with values between the " ".

This should work for the first column.

Looking at th elinkit seems like you hav egone through the same exercise previously and would I be understanding that in making two arrays it was to do a similar thing to which i have set out?

I will give the suggestions you have made some attention.

I hav ealso cleaned up the linked page a little to veiw better but as per normal will require the advice and guidance of the folk that know.

Thanks again
Rob

No.

Let's break it down a little:

mid["left"]

is a number

borderDV

is a number

spaceDV

is a number

You can replace any of those with another number (even a literal number like 10), but you cannot replace just a part of one of those with a number.

Rob (SA)
10-30-2007, 04:52 AM
Morning John,

Thanks very much for that advice.

I have changed only made the following change and that was replacing mid["left"] with a value and mid["top"] with a value.

The border and space parameter was left the same.

The rsult is as you find it now - thank you. the "Veiw Columns 1 -18" are now sorted.

I surpose the hard part is still to come or is it a matter of placing a similar change eslewhere in the script to allow "Layout columns 1-18" to move right.

Thank you very much for the time you have given me

Regards
Rob

Rob (SA)
10-30-2007, 05:11 AM
Hi John,

Just a thought.

Each of these images open in a specified position but with it each image has two smaller images - if i can call them that appearing - that of the "Close" button and that of the "o.n.e.s.e.c.o.n.d" loading button.

Both open in relation to the main image and they always open with the first columns mouse over.

Is it not then a possibility to allow the images that wish to open under the "Layout column" to open in the same way - in relation to the first image.

That way I can remove a table/ column and get the same desired effect without making my page to busy.

Like I say just and idea.

Regards
Rob

Rob (SA)
10-30-2007, 08:46 AM
Hi John,

A thousand thanks you's.

Can you belive it - It took a little effort but I have solved my problem and it works.

Check it out www.gnjgf.co.za/iptcour.html

My page might still look like a mess and suggestions to tidy it up would be welcome.

Kind Regards
Rob:) :) :)

Rob (SA)
11-01-2007, 07:01 AM
Hi John,

My saga continues.

Having succesfully created the effect I was looking for maybe you can help me with the following?

When I move the mouse over the number shown on the screen the mouse over effect happens however I would like the background of the number to change at the same time - that way I know which image I am veiwing.

Your help here would be valued

Kind Regards
Rob

Site where help is required is www.gnjgf.co.za/iptcour.html

jscheuer1
11-03-2007, 05:38 PM
Your markup is invalid and if you fix it, this probably will no longer work, but could easily be made to work with valid markup.

Put this script in the head:


<script type="text/javascript">
function hlight(el){
var c=el.className=='layout'? 'pink' : 'lightblue';
for (var i = 0, a=document.getElementsByTagName(el.tagName); i < a.length; i++)
if(a[i].className==el.className)
if(el.tagName.toLowerCase()=='a')
a[i].parentNode.style.backgroundColor='';
else
a[i].style.backgroundColor='';
if(el.tagName.toLowerCase()=='a')
el.parentNode.style.backgroundColor=c;
else
el.style.backgroundColor=c;
}
</script>

Make all the:


<a href="#" onmouseover="dv.showDV(a3); return false">

like:


<a href="#" class="course" onmouseover="hlight(this);dv.showDV(a3); return false">

and all the:


<a href="#" onmouseover="rh.showRH(a19); return false">

like:


<a href="#" class="layout" onmouseover="hlight(this);rh.showRH(a19); return false">

Rob (SA)
11-03-2007, 08:46 PM
Hi John,

It works like a dream.

My sincerest thanks - it is exactly what we need and I am sure should you look there tommorow you will see the fruits of your efforts.

Kind Regards
Rob:) :) :)