JavaScript - Image Roll Over

Hello,

First of all, I am not a coder. I can put together some fairly simple HTML, and can borrow chunks of JS code to suit certain basic purposes. Also, I am terribly sorry if my technical lingo is way off target.

I have managed to accomplish two separate goals using javascript, but am having trouble combining their results.

I have created an image link that randomly calls a URL from an array. I also have a separate roll-over image. What I am trying to do is have the link that accesses the array also be a roll-over image. I can't seem to accomplish this.

http://matrix.senecac.on.ca/~mlinhar...low/page7.html

This URL is what I am working on. The "b" symbol is the roll-over. The "right" arrow accesses an array at:

http://matrix.senecac.on.ca/~mlinhar...w/randomize.js

I have tried simply adding my roll-over code to randomize.js and adjusting the array accordingly, but that doesn't seem to work.

I would like the "right" arrow to be a roll-over image as the "b" symbol is, but also access the "randomize" array as it currently does.

My problem is that my understanding of JS isn't great enough to determine how separate pieces of code might be combined or function together.

Anyways, I'm sorry if my technical knowledge and abilities are too underdeveloped for this forum. I would appreciate any and all advice anyone might have.

Hello.

I want to display some text in some part of website when user "rolls over" an image. How can I make it possible? Text position must be totally flexible. (not over image)

Hi friends,

Im new with JS.
How to make the roll over effect in JS.
An image, on roll over, the big size of the same image needs to appear.

regards

anoop

Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options.

I know the code will be straight forward, I can't work it out though.

Thanks whoever can help = )

Hi there,

If anyone can help me it would be incredibly appreciated.

I have this JavaScript file below. Currently it roll's over the image fine but the image stays as the hover after the mouse rolls over. Is there a really quick way to add a roll off/ mouse off function so the image rolls back to the underlying image?

Again thank you in advance for any help you can provide for this problem as I'm very new to JavaScript!
Chris

***********
"// JavaScript Document

$(function() {
$('img[data-hover]').hover(function() {
$(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
}).each(function() {
$('<img />').attr('src', $(this).attr('data-hover'));
});;
});
***********

Could some one help me with achieving a roll over effect? Not the type where you hover over a link and a image appears and then you move away from the link and it disappears but rather like the ones viewable in the roll over section here @ www.dailyscience.com - that is you hover over a link and text and an image appears but then you move away and it still remains until you hover over another link? I'm a novice to javascript and am still learning so any help would really be appreciated, thanks!
PS I realise there is a connection to the HTML code as this is where the content lies but interlinking this with my desired effect is rather annoying. Once again thanks.

I want to mouse over a symbol (or coordinate) on an image and have a photograph appear of the real life item. Is there a code that could be used for doing this?

Any help appreciated.

Code:

 var rollnav = [];

   
rollnav[0] = new Image ;
rollnav[0].src ="buttons/button 1 suits.png"; 

rollnav[1] = new Image;
rollnav[1].src = "buttons/button 2 suits.png";

rollnav[2] = new Image;
rollnav[2].src ="buttons/button 1 dresses.png"; 

rollnav[3] = new Image;
rollnav[3].src ="buttons/button 2 dresses.png";  

rollnav[4] = new Image;
rollnav[4].src ="buttons/button 1 christening.png"; 

rollnav[5] = new Image;
rollnav[5].src ="buttons/button 2 christening";  

rollnav[6] = new Image;
rollnav[6].src ="buttons/button 1 Acessories.png"; 

rollnav[7] = new Image;
rollnav[7].src ="buttons/button 2 Acessories.png";  

rollnav[8] = new Image;
rollnav[8].src ="buttons/button 1 home.png"; 

rollnav[9] = new Image;
rollnav[9].src ="buttons/button 2 home.png";  

rollnav[10] = new Image;
rollnav[10].src ="buttons/button 1 contact us.png"; 

rollnav[11] = new Image;
rollnav[11].src ="buttons/button 2 contact us.png";  

rollnav[12] = new Image;
rollnav[12].src ="buttons/button 1 links.png"; 

rollnav[13] = new Image;
rollnav[13].src ="buttons/button 2 links.png";  

function SwapOutsuit(){
    document.suitnav.src = rollnav[1].src;
    return true;
  }

  function SwapBacksuit(){
    document.suitnav.src = rollnav[0].src; 
    return true;
  }
function SwapOutdress(){
    document.dressnav.src = rollnav[3].src;
    return true;
  }

  function SwapBackdress(){
    document.dressnav.src = rollnav[2].src; 
    return true;
  }
  
  function SwapOutchris(){
    document.chrisnav.src = rollnav[5].src;
    return true;
  }

  function SwapBackchris(){
    document.chrisnav.src = rollnav[4].src; 
    return true;
  }
  
    function SwapOutaccess(){
    document.accessnav.src = rollnav[7].src;
    return true;
  }

  function SwapBackaccess(){
    document.accessnav.src = rollnav[6].src; 
    return true;
  }
  
  function SwapOuthome(){
    document.homenav.src = rollnav[9].src;
    return true;
  }

  function SwapBackhome(){
    document.homenav.src = rollnav[8].src; 
    return true;
  }
  
  function SwapOutcus(){
    document.cusnav.src = rollnav[11].src;
    return true;
  }

  function SwapBackcus(){
    document.cusnav.src = rollnav[10].src; 
    return true;
  }
  
  function SwapOutlink(){
    document.linknav.src = rollnav[13].src;
    return true;
  }

  function SwapBacklink(){
    document.linknav.src = rollnav[12].src; 
    return true;
  }

hi im trying to create a series of rollover buttons for my site that can be used on all pages.
im using the above array to switch the button images the problem is they all work up until number 9
then they just display the image set as the original image and dont change on mouse over.
i try declaring an array with more than 9 spaces it doesn't seem to make a difference ive tried the new array format to with no avail.
any help would be greatly appreciated.

i have included my code which is embedded in my html to call the function below.
Code:

 <A href="coolkids formal contact us.html"
  onMouseOver="SwapOutcus()"
  onMouseOut="SwapBackcus()"><img
  src="buttons/button 1 contact us.png" name="cusnav" align="left"
  ></A>
  
  <A href="information.html"
  onMouseOver="SwapOutlink()"
  onMouseOut="SwapBacklink()"><img
  src="buttons/button 1 links.png" name="linknav" align="left"
  ></A>

Hi
I use dreamweaver to build sites, and so don't really have to do much with the code, however adobe cs5 has removed the navigation bar tool and I am totally lost without it.
I know Java script is needed...
Could anyone help? If someone has some code ,for a vertical navigation bar with 8 buttons, 3 images for each button, buttonup mouse over and button down (which is of course a link to another page), that I could copy and edit, it would help alot!

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you.

Javascript
Code:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL
Code:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

HTML LARGER IMAGE
Code:

<div><img src="" id="BigOne"></div>

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

Hi,

I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website?

Thanks!

Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript.

Code:

<noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">

var delay=6000
var curindex=0

var images=new Array()

	images[0]="quote1.gif"
	images[1]="quote2.gif"
	images[2]="quote3.gif"
	images[3]="quote4.gif"
	images[4]="quote5.gif"

var preload=new Array()

for (n=0;n<images.length;n++)
{
	preload[n]=new Image()
	preload[n].src=images[n]
}

document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=images[curindex]
}

setInterval("rotateimage()",delay)
</script>

But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics.

Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated.

Thanks,
Dell