Code Help

Isaac · #1 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 · #2 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 · #3 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.

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: