?
Solved

URGENT!!!!!!!!PLEASE PLEASE

Posted on 2003-11-06
11
Medium Priority
?
196 Views
Last Modified: 2010-04-09
i am helping a friend out and he needs this by tommorrow, and i am short of time and busy. So i am asking for help.

http://ww2.potterybarn.com//cat/roomindex.cfm?cid=romhofgar&cmsrc=&src=rmscromhof%7Crrooms%2Frmscrom%7Crrooms%2Fhme

If you go there you will see when you mouse over the pic you will see 4 squares around each pic and when you mouse out you will see there gone.

I have the javascript for this. I just need the HTML. Here is the link to the website the guy is working on.
http://www.greenteadesign.com/test.html

You will see that there is the divs using absolute position. What i would like to do is make it so that it will work with all screen resolutions. I really do not want to detect the resolution and send to different page bases on it. I would like for this to work in one page.

Ignore the code in the page. He did it, i am going to clean it up and make it compliant.

I am offering the max points since this is urgent and i am short on time.


TIA
jAy
0
Comment
Question by:jaysolomon
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +4
11 Comments
 
LVL 2

Expert Comment

by:Yavor_01126
ID: 9697122
Hmmm ... this is easy  ;-)

First make the page in the resolution you want (your work resolution) , then you got the whole page and the "focus of the page"
where the mouse is playing you put this "focus" in to an IFRAME so just need to arrange the IFRAME in the other page... Got it !    ;-)

If you play around you can do the same with CSS . It is nothing much ... I didn't play much with resolution but if you arrange all elements to left or right and top or bottom it will work very well I think !

You can try doing this on flash it will be more than simple in flash ... It can be done all in Flash (the site) or just every page contains a flash movie ... you decide !

But try doing it like I told you first because the source is already build and you have to modify it only .
But with an IFRAME it will work 100 % because it uses the same way I explain you in second ...

just CSS tight work nothing more


Regards !
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 9697142
Not gonna do flash. i hate flash.

0
 
LVL 2

Expert Comment

by:Yavor_01126
ID: 9697339
OK but try it as I told you ...
with an IFRAME it is all align at left and top and no text will make your page bugs ...

Try it ! As I told you it is all a matter of CSS precision ... because I think that some browsers render HTML elements and CSS elements as part of one when combinig the problem with resolution it is all just perfect to bug out !  :-)

So try make the FOCUS of the page in an IFRAME and make the IFRAME large enough to fit with the main page and the resolution may stop buging your work

I don't like flash too ! I prefer codding rather than designing !

I use it some times if I want to make something like funny animation or stuff like that ...


Regards !
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 6

Expert Comment

by:mattjp88
ID: 9697601
Well the easiest way would be to put hotspots on the image and just make a bunch of images that have the corners on it.  In the hotspot have mouseover and mouseout commands to change the image to the new image.  I think the way they did it was with layers and positioned the layer exactly over the place on the image that you want to have the corners.  

So let me explain about the hotspot idea better.  You have one image with map on it and in the map code have it do a mouseover and mouse command that changes the image to another preloaded image that has the corners on it.  So you will have a bunch of images.

If you want, i could work on sample code, but I don't have an image i could do the sample with.

I just looked at the test page, from what I see, its just a metter of getting the positioning of the layers right.  I will take a deeper look...

-Matt
0
 
LVL 6

Expert Comment

by:mattjp88
ID: 9697804
OK, well I just spent like 30 minutes for nothing, since the content on the page in centered, there is no way of doing this, you need to move all the content aligned to the left and top.  When he does that, it will just be a matter changing the top and left attriputes in the DIVs for the corners and for the actual link.

-Matt
0
 
LVL 16

Author Comment

by:jaysolomon
ID: 9698824
Yea i tried the image mapping and got it working, but it flickers when you move your mouse. Then i used setTimeout in javascript to slow the flicker down, but it did not slow enough.

Still working...
0
 
LVL 3

Expert Comment

by:monvelasquez
ID: 9699225
could you try making the pisition of the divs relative to the position of the upper left corner
of that cell where the image is located.... maybe that could work...
0
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 2000 total points
ID: 9700010
Jay,

Try this link i think

http://www34.brinkster.com/hefc3/showroom.html

Not sure why it needed the '+90', but looks like it works

Easynow
0
 
LVL 1

Expert Comment

by:Macorc
ID: 9700768
Many solutions here.

What about having everything inside a <div style="position:relative">, which could be centered in the page. Inside this <div></div> you can place many other layers, positioning them in an absolute mode. This absolute mode refers to the general div, so it would work the same in any resolution:
<table><tr><td align="center">
<div id="general" style="position:relative">
    <div id="picture" style="position:absolute;top:0px;left:0px"><img src...></div>
    <div id="Object1Focus" style="position:absolute;topXXpx;left:XXpx;"></div>
</div>
</table>

something like that. I think it should work
0
 
LVL 2

Expert Comment

by:Yavor_01126
ID: 9702274
Hey !
Why don't you just make a second image ... aaa I mean to cut the pic in peaces so each object is a image and then simply make second image which is with this "corners" and then just make an roolover effect .

Should work as a script !

Regards !
0
 
LVL 6

Expert Comment

by:ren_b
ID: 9704892
like macorc said, put the absolute divs inside the relative div.  most of the scripts on that page are macromedia scripts anyway. but if you wanted to be fat and sassy, you could just use css hovers and not give a damn about ie... but that probably isn't an option.

i didn't look at much of the source, only enough to see the css and some scripts. but im guess the corners are just gif/pngs on a transparent div? if it is, there isn't to much work to do.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question