Chief Delphi - Code Help

Chief Delphi (http://www.chiefdelphi.com/forums/index.php)

- Website Design/Showcase (http://www.chiefdelphi.com/forums/forumdisplay.php?f=64)

- - Code Help (http://www.chiefdelphi.com/forums/showthread.php?t=128990)

Ok...I'm working on a website:

I have a large logo with an image map
<map> used as a nav bar in index.html. on the other pages I have a smaller version of the same image map. my question is, using JavaScript and HTML5, how can I get the larger image to shrink down and move to the other one, and THEN hyperlink.

It feels like I need to code a series of events in JavaScript, but I'M not sure how to do it. any help would be appreciated!

Thanks!

So you're saying that you have one big image on a map as your nav bar. The part I'm not sure I understand: "how can I get the larger image to shrink down and move to the other one."

Are you saying you want the nav bar to shrink on your home page? Or do you want the nav bar on your other pages to have a scaled image map?

You might want to look at CSS Animations

The main page is a image mapped version of our logo, with different page names on it. I have the same concept, but smaller, in the corner of the other pages (upper left) I currently have it hyperlinking when a mapped section is clicked, but I want to delay the hyperlink and have the logo move and shrink to the size and location of the other one beforehand, then hyperlink afterwards. did that help?

From what you said, I'm getting:
So, on your home page, you have a big image with an image map. On hovering that image, you want the whole image to shrink to the same size as in your other pages, and then have various hyperlinks on it. If the hover is taken off, you still want the image to stay small.

If the above is true, I would say you first devise some way to shrink the large image, whether with a gif file or with a CSS animation, as RoboSteve said. Instead of delaying the hyperlink, you may just want to remove the image map for the large image, unless you want to scale the image map with CSS. If you only want to hover the image one time before shrinking, you may just need to add a "onmousehover" attribute to your large logo, in which you could put the new shrunken down image.

Please clarify if you don't think I get it or if you're still not sure what to do. I still don't feel I quite understand.

close, but I want it to get small after CLICKING, then hyperlink, without a second click. It seems like something that would be REALLY difficult.

The best way to accomplish this is to use JQuery to select the image, make it smaller, then redirect the window to the page you want. If you haven't heard of JQuery, it's basically a library and set of utilities that sits on top of stock JS to accomplish many common patterns in Javascript. It is widely used in the web development industry and allows you to avoid using a lot of boilerplate code and makes more complex animation and AJAX trivial. Here's a link to the API docs.

From what it sounds like, you have a large image that you want to shrink with animation and then redirect the browser to another page. Without seeing your code exactly or knowing your specific use case, it is difficult to provide a lot of help, but I'll try. It would be helpful if you uploaded it.

Use the

Code:

.click()

method in JQuery to trigger a

Code:

.animate()

method that modifies the CSS of the image to the state you want. Then call the standard Javascript

Code:

window.open("URL")

Code:

window.location.href("URL")

to load the new page.

I hope that answers your question, but again, it's tough to give specific feedback without the code you already have. Good luck with your website!

If Isaac's jQuery info works for you, that's fine. Considering you have an image map, here's some simplified skeleton code:

Code:



<img id="navigation" src="first.gif" alt="FIRST" usemap="#map">



<map name="map">

  <area shape="rect" coords="0,0,50,50" href="javascript:openLink(link1);" alt="link1">

  <area shape="rect" coords="50,50,100,100" href="javascript:openLink(link2);" alt="link2">

  <area shape="rect" coords="100,100,150,150" href="javascript:openLink(link3);" alt="link3">

</map>



<script>



function openLink (link) {

   document.getElementbyId("navigation").animate(height:>enter small height<px, width:>enter small width<px);

   window.open("www.example.com/"+link,"_self")

}



</script>

I may not be the best coder, but you may want to try that. There's probably bugs all through this, but if you can find the small mistakes you can fix them.

This code uses the .animate() function from jquery's libraries, so you will need to download the libraries for use: jquery.com .

If there's still confusion or there's a mistake (which I make a lot), again, please clarify. Good luck on your website.

Code:

<!doctype=html>

<html>

<head>        <title>C.I.S. Robotics</title>

        <link href="cis.css" rel="stylesheet" type="text/css" />

        </head>

        <link rel="shortcut icon" href="favicon.ico" />

        <script src="cis.js"></script>

</head>

<body>

<div id=index>

        <img src="cislargelogo.png" width="1020" height="905" alt="Planets" usemap="#indexmap">



<map name="indexmap">

        <area shape="poly" coords="274,36,738,36,649,189,364,189" href="media.html" alt="Media">

        <area shape="poly" coords="747,44,973,435,798,436,658,196" href="offseason.html" alt="Offseason">

        <area shape="poly" coords="795,447,975,447,748,839,658,686" href="outreach.html" alt="Outreach">

        <area shape="poly" coords="367,691,648,691,742,849,273,849" href="competition.html" alt="Competition">

        <area shape="poly" coords="227,451,360,682,267,838,44,451" href="leadership.html" alt="Leadership">

        <area shape="poly" coords="39,441,221,441,358,201,267,47" href="awards.html" alt="Awards">

        <area shape="poly" coords="364,189,649,189,658,196,798,436,795,447,658,686,648,691,367,691,360,682,227,451,221,441,358,201" href="home.html" alt="Home">

</map>

</div>



</body>

</html>

heres the whole page. I want it to work with the existing image map. is there a way to do this? also, would a redirect to a page with an animation and a delayed redirect accomplish the same thing? an animated gif wont work, as it needs the transparency.

The only issue that I can see with that is wierd reloads that defeat the purpose of it...or should I just combine my whole site into one page, and have that change states on it?

I'm getting the idea that you want the hexagon map to shrink and a loading animation to happen. Then once the content is loaded, expand and have content in it?

If so it's called a page loading effect. Codrops just did a tutorial on them with some great examples.