Code Help

Cyan · #1 22-04-2014, 14:01

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.

Akolbi · #2 22-04-2014, 15:46

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.

Isaac · #3 22-04-2014, 19:00

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")

or

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!

Akolbi · #4 22-04-2014, 23:28

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?

ThatGuyAdam · #5 23-04-2014, 23:51

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.

Cyan · #6 22-04-2014, 19:58

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.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode	Rate This Thread: