HTML - Image That Can Scroll-zoom

So a while back I experimented with doing text/image wraps in html.
The best solution was using a array of divs.


And i found a great site, that will analyze your image and generate the code for it.
http://www.theboxoffice.be

Today however I had a thought to try and get the text to be scrollable around the image wrap.



any thoughts?

Can anyone help me out?
I've set up a test site for a project where I have a scrollable table within an iFrame.

Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links.

Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar.

(Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.)

here's the link to the test site: http://www.thegrandamerican.com/

here's the line of code I think is the correct place to make corrections:
<iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe>

The hierarchy works as follows:
index.htm > spotlight_news.htm > oprah june 09_news.htm

The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar.

other notes and associated files (for the auto scroll) a
smooth-src-comments.js
smooth.pack.js


Thanks. - J

Hello,

I have a web page that has an image set as the background.

http://www.theillusionist.ca/about.html
- I used nested tables. Yes, I know, bad thing, but anyways, when I zoom in / zoom out the site the site does not look good.

So I thought I would <div> tags, re-work the above page
http://www.theillusionist.ca/atest.html
and the same issue occurs.

I just don't know what to do.
Can someone give some solid advice or point me to a tutorial that would be great.

Thanks.

Hi,
Maybe this has been asked a thounsand times in this forum, but I haven't been here for a while.
I would like to know how this is done: You have a button with a thumbnail of a picture that you click and this zoom in in the same page, then you click it back to zoom out.

Any help will be appreciated.

Thanks

on this site, when you put your mouse on an image, it enlarges, that seems better than have people click and it goes to another window. How is that done, I look a little for a java script to help, but I didn't find the mouse over one

link below shows what I mean

TIA


http://www.redcrossstore.org/Shopper...8&LocationId=0

HI,

I want to design the website throw the html without use the javascript and use the zoom function in my site can i do this function without use the javascript. Either this is possible and you know html code about the zoom function then you reply this problem.

Thank you for advance.

So i have implements cloud zoom from professor cloud and it seems to be working half the way.

Here is what is supposed to be executing:
http://www.professorcloud.com/mainsi...-zoom-test.htm

But if you look at mine:
http://enveme.com/index.php?/product/graphic-tee-dorm-1

The mouse over is not giving me the magnified view. I have contacted the coder himself but no avail.

Can anyone help?

Hi all !
I have a quick question regarding a scoreboard app I am writing that displays 3 numbers on a large VGA screen.
The question deals with best practice to build this page. I am using Visual Studio and but not any specific ASP.NET controls. The display consist of one table with 3 cells. one cell onto, 2 cells below the top one.
Since I do not know the exact resolution of the VGA screen where my web page will display I have ventured to play with the zoom. However, using the zoom seems to offset the page downwards, meaning it does not zoom centered (or from the middle if you like). The more zoom I apply from the html the larger the page becomes, but it also moves down on the VGA screen.
I am running the page in browser kiosk mode. It also seems to be very tricky to make the page position itself on the very top of the browser window.
Using tables a problem, and if so, should I go with CSS ??

Thanks for input and thoughts on this..

Anders

Hi,

I'm hoping someone can help me. I bought a website template and I thought I would be able to figure it out. I'm having a lot of difficulty in a lot of areas. But this particular issue is driving me crazy. I only have some basic HTML knowledge.

I'm basically trying to make images on my site so when you click on them they enlarge. When you click on them again and they shrink back down.

First of all, this is the template I used:
http://www.templatemonster.com/flash...tes/24691.html

And this is what I'm specifically trying to add to it:
http://www.cabel.name/2008/02/fancyzoom-10.html
Scroll down and click on the sample images.

I followed the simple instructions on that page above but where it says Body ID=, I'm not sure what I'm supposed to put there.
Also the image source code in the instructions is different then the code in my .xml file. My code looks like <image imageUrl="_home_images-1.jpg"/>


I've literally spent the whole day on this trying to figure it out and searching online. If anyone can show me how this can be done I would REALLY appreciate it.
I'm not sure what other info you need, but I could zip up the template and provide it if needed. (its only 5mb)


Thanks in advance
Sarah

well my issue comes when you try to use ctrl-mouswheel to zoom in or out on my page. works fine in ie8 and ff3, but not in chrome and safari. there isnt really a need for this to work, except the fact that no professional website should have such a major error. http:www. fab-tennis .com click the book a lesson tab, its the easiest way to tell since its the longest page i have. sorry for the bright colors.

when you zoom in or out, the iframe which is usually fits exactly between my header and footer, shrinks to a small box maybe 500px in height instead of having height:100% of the table cell that it is in. i would reccomend trying the zoom on ff then try it on chrome or safari to see what im talking about.

HTML Code:

<html>

    <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#FFFF00" style="overflow-x: hidden; overflow-y: hidden;">	
    
    <link rel="stylesheet" type="text/css" href="css/basic.css" />
    
    <!--[START HEADER]-->
    <div style="position:absolute; top:0px; left:0px; width:100%;">
        <table align="center" class="Header" cellspacing="0" cellpadding="5" style="height:40px">
            <tr align="center">
                <td width="20%" class="headerLeft" id="1" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    home
                </td>
                
                <td width="20%" id="2" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    book a lesson
                </td>
                
                <td width="20%" id="3" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    biography
                </td>
                
                <td width="20%" id="4" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    qualifications
                </td>
                
                <td width="20%" class="headerRight" id="5" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    photos
                </td>
            </tr>
        </table>
    </div>
    <!--[END HEADER]-->
    
    <!--[START BODY]-->
    <table align="center" cellspacing="0" cellpadding="0" class="Body"><tr height="40px"><td></td></tr>
    <tr><td valign="middle" align="center">
            
        <iframe name="iBody" id="iBody" marginheight="0px" marginwidth="0px" frameborder="0" scrolling="auto" allowtransparency="true" src="home.html"
        style="width:100%; height:100%; border:0px;">
            BODY
        </iframe>
                
    </td></tr>
    <tr height="40px"><td></td></tr></table>
    <!--[END BODY]-->
    
    <!--[START FOOTER]-->
    <div style="position:absolute; bottom:0px; left:0px; width:100%">
        <table align="center" class="Footer" cellspacing="0" cellpadding="5" style="height:40px">
            <tr align="center">
                <td width="20%" class="footerLeft" id="6" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    cancel lesson
                </td>
                
                <td width="20%" id="7" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    seven
                </td>
                
                <td width="20%" id="8" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    eight
                </td>

                <td width="20%" id="9" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    nine
                </td>
                
                <td width="20%" class="footerRight" id="10" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)">
                    ten
                </td>
            </tr>
        </table>
    </div>
    <!--[END FOOTER]-->

	<script type="text/javascript" src="javascript/basic.js"></script>
    
    </body>
</html>

Ive been looking EVERYWHERE for a site with a code for a scroll box with a trasparent scroll bar, Ive seen the code where I can edit the size of the box as well as the color of the box itself and I know how to do THAT. how do I make it where the code displays the scroll code as well so I can fully customize it? it seems that its always hidden..

I had the problem of my page shifting to the right whenever it was too long for the window to allow a scroll bar so I added this overflow-y:scroll; to the body information in the css sheet. It works fine in most browsers but I've noticed that with IE7 the scroll appears in the top part of the margin and not on the browser side. It just doesn't look right. Please advise. Here's the link.

http://www.yotti.de/indextemp.html

Trying to create a simple scrolling for fitting my template.

sample:
http://www.hottunaint.com/press1.html

template sample to fit in the main panel (image size)
http://www.hottunaint.com/product.html

thanks

Hello.

I'm currently trying to help my friend develop his website. He wants to put a banner that's linked back to his site, and then underneath a scroll box which contains the code to put the banner in anywhere.

The problem is, whenever I try, and I put the code in the scroll box, it shows the banner, instead of the actual code.

How can I stop the banner from showing up? Thank you

Im developing a homepage, www.hallevikslagret.se
My problem is, when your using a small resolution or if you make the browserwindow to small the menu at the top disapears. Ive tried many different ways to show a scroll but i cant solve it.

How do i get a scroll when the content gets to big.

I know that im not using correct XHTML-language on the page. I will get to that as soon as possible when i solve this problem.

Thank you for your time!

Best Regards Jens