Image swap with span / div Options

[ot4ku]

hi,
i want to swap a image everytime someone goes witht he mouse over a word, for example ther eis a list of animals, and if you go over a word the IMAGE on the right side of the webseite changes to that of the animal (always on same position)
ON html i could do it, but i have no idea how to do this with this DIV and SPAN things...
The website im using dosent allow CSS or normal html image swaps :/

For example, mouseover works like this: (and only like this)

<ul class="multi_select"><li class="selector">
<a rel="nofollow" href="#" target="_blank">
<span class="ms-int" style="width:186px;height:276px;background-image:url(pic01a.gif);border:0;margin:0;padding:0;">

<span class="button" style="width:186px;height:276px;background-image:url(pic01b.gif);border:0;margin:0;padding:0;"></span>
</span>
</a></li></ul>

And i have NO idea why this is working like above... its just on the website it says use "this" for Mouseover Images.

Any idea how i can use the same style for swaping a image on a position on the site like i wrote above?
Like changing a pic to "pic01c.gif" "pic01d.gif" "pic01d.gif" etc. by mousover some text?

I know its not good explaind, maybe someone has a idea? thanks

[pandy]

You can only to this with CSS and/or JavaScript. With only HTML you can't do things like this. It's just markup.

You must have misunderstood how the example works. It does use CSS (in the style attributes) but not enough to make something happen. There must be more, either embedded in head or in an external style sheet.

[ot4ku]

You can only to this with CSS and/or JavaScript. With only HTML you can't do things like this. It's just markup.

You must have misunderstood how the example works. It does use CSS (in the style attributes) but not enough to make something happen. There must be more, either embedded in head or in an external style sheet.

Is there a way to realise it with just <span & <div somehow? Direclty in the file with no external css file?

[pandy]

With en embedded style sheet in HEAD but not with style attributes only. Because you need to use :hover and that isn't possible in a style attribute.

You can inline JavaScript though. Do I understand it right that you can use CSS and JS if you can write it in HTML attributes?

[ot4ku]

With en embedded style sheet in HEAD but not with style attributes only. Because you need to use :hover and that isn't possible in a style attribute.

You can inline JavaScript though. Do I understand it right that you can use CSS and JS if you can write it in HTML attributes?

I think so, im nor sure, i can test it if you can give me an example, its for "justin.tv" they are so complicated in editing the channel...

It should look like these: http://www.web-toolbox.net/webtoolbox/bild...dvorschau03.htm Its just those </script> things wont work :/

This post has been edited by ot4ku: Jun 2 2012, 12:21 PM

[pandy]

You can use any JavaScript snip to test that, but here goes.

HTML

<img src="http://htmlhelp.com/icon/wdglogo.gif" onmouseover="this.src='http://forums.htmlhelp.com/uploads/av-6.gif'" onmouseout="this.src='http://htmlhelp.com/icon/wdglogo.gif'">

[ot4ku]

Ok it dosent support the normal mouseover like you posted above, just testet it :/

so it need something with div & span or something...

It only works like this:

<ul class="multi_select">
<li class="selector">
<a href="URL">
<span class="ms-int" style="width:WIDTHpx;height:HEIGHTpx;background-image:url(base_img);border:0;margin:0;padding:0;">
<span class="button" style="width:WIDTHpx;height:HEIGHTpx;background-image:url(highlight_img);border:0;margin:0;padding:0;"></span>
</span>
</a>
</li>
</ul>

So i need the same kind of code for the image swap like here: http://www.web-toolbox.net/webtoolbox/bild...dvorschau03.htm

This post has been edited by ot4ku: Jun 2 2012, 06:09 PM

[pandy]

Again, the markup you posted does nothing on its own...

[ot4ku]

Again, the markup you posted does nothing on its own...

what do you mean? i use these code to make my mouseovers, or what do you mean?

[ot4ku]

well it dosent work if i make a HTML and look at it, but for some reason it works on justin.tv.
They use the most complicated way i ever saw... i dont think its possible there to use it :/ thanks anyway

This post has been edited by ot4ku: Jun 2 2012, 06:33 PM

[pandy]

So they have a style sheet that makes it work...

[Frederiek]

So i need the same kind of code for the image swap like here: http://www.web-toolbox.net/webtoolbox/bild...dvorschau03.htm

They use javascript, using this HTML and function calls:

CODE

<a href="java script:void(0)" onmouseover="Zeigen('bild4')" onmouseout="Verstecken()"><img class="Mini" src="symb-75-004.gif" width="75" height="75" border="0" alt=""></a>

View the page source for the script. You'll find it near the top of the page.
If that doesn't work for you, you might take a look at http://meyerweb.com/eric/css/edge/popups/demo2.html .

[pandy]

He can't use that, he just wants it to look like that.

[Christian J]

i want to swap a image everytime someone goes witht he mouse over a word, for example ther eis a list of animals, and if you go over a word the IMAGE on the right side of the webseite changes to that of the animal (always on same position)

You need to post the HTML for that IMG element as well.

For example, mouseover works like this: (and only like this)

<ul class="multi_select"><li class="selector">
<a rel="nofollow" href="#" target="_blank">
<span class="ms-int" style="width:186px;height:276px;background-image:url(pic01a.gif);border:0;margin:0;padding:0;">

<span class="button" style="width:186px;height:276px;background-image:url(pic01b.gif);border:0;margin:0;padding:0;"></span>
</span>
</a></li></ul>

The above only contains a single list item. If you want different animal images to show with every list item, you also need a way to indicate this in each list item's HTML. Also, where does the mouseover take place --on the LI, link or on one of the SPAN elements?